android app安卓应用实例：起始页+fragment底部导航栏+ViewPager滑动切换+个人信息界面（二）

起始页+fragment底部导航栏+ViewPager滑动切换+个人信息界面示例安卓app

上篇写了起始页、底部导航栏和滑动切换界面，这篇写的是个人信息界面的一个小示例。

如果想看上篇笔记，传送门在这里~~

android app安卓应用实例：起始页+fragment底部导航栏+ViewPager滑动切换+个人信息界面（一）

来！
先上效果图~

参考了网上一些大佬的代码和界面，简单地做了一个安卓app的个人信息的基本界面，基于Android studio。

这里先感谢写Android菜鸟教程的那位大哥，在他的教程里我学到了很多东西，我把这篇写下来，一来想写个笔记，二来希望能和大家一起交流学习，如有错误，还请多多指教~

=============================
个人信息这里包括 昵称、性别、年龄、身高、体重
需要自己准备的图片：一张你喜欢的头像，一张箭头符号图片

先来个布局界面~

fg_info.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView  xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/bg_white">
<LinearLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/bg_white"
    android:weightSum="1">

    <com.example.asus.huadong.CircleImageView
        android:layout_width="80dp"
        android:layout_height="120dp"
        android:src="@mipmap/myprofile"
        app:type="circle"
        android:layout_gravity="center"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp" />
    <View
        style="@style/BigDivider"/>

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <TextView
                style="@style/text_item"
                android:text="佛性人生c"
                android:layout_gravity="center_vertical|right"
                android:layout_marginRight="40dp"
                android:id="@+id/my_name" />
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/setting_arrow"
                android:layout_gravity="center_vertical|right"
                android:layout_marginRight="20dp" />

            <Button
                style="@style/info_item"
                android:text="昵称"
                android:id="@+id/myname" />

        </FrameLayout>
        <View
            style="@style/BigDivider"/>

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <TextView
                style="@style/text_item"
                android:text="男"
                android:layout_gravity="center_vertical|right"
                android:layout_marginRight="40dp"
                android:id="@+id/my_gender" />
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/setting_arrow"
                android:layout_gravity="center_vertical|right"
                android:layout_marginRight="20dp" />

            <Button
                style="@style/info_item"
                android:text="性别"
                android:id="@+id/mygender" />

        </FrameLayout>
    <View
        style="@style/HorizonTalDivider"/>
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <TextView
                style="@style/text_item"
                android:text="0 岁"
                android:layout_gravity="center_vertical|right"
                android:layout_marginRight="40dp"
                android:id="@+id/my_old" />
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/setting_arrow"
                android:layout_gravity="center_vertical|right"
                android:layout_marginRight="20dp" />

            <Button
                style="@style/info_item"
                android:text="年龄"
                android:id="@+id/myold" />

        </FrameLayout>

    <View
        style="@style/HorizonTalDivider"/>
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <TextView
                style="@style/text_item"
                android:text="50 厘米"
                android:layout_gravity="center_vertical|right"
                android:layout_marginRight="40dp"
                android:id="@+id/my_tall" />
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/setting_arrow"
                android:layout_gravity="center_vertical|right"
                android:layout_marginRight="20dp" />

            <Button
                style="@style/info_item"
                android:text="身高"
                android:id="@+id/mytall" />

        </FrameLayout>

    <View
        style="@style/HorizonTalDivider"/>
        <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
            <TextView
                style="@style/text_item"
                android:text="10 公斤"
                android:layout_gravity="center_vertical|right"
                android:layout_marginRight="40dp"
                android:id="@+id/my_weight" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/setting_arrow"
            android:layout_gravity="center_vertical|right"
            android:layout_marginRight="20dp" />
        <Button
            style="@style/info_item"
            android:text="体重"
            android:id="@+id/myweight"/>
    </FrameLayout>

</LinearLayout>
</ScrollView>

上面用到的CircleImageView的代码，就是一个圆形图像，作为头像会比较好看，感谢写Android菜鸟教程的大哥给的示例，他是这么写的：

CircleImageView.java

package com.example.asus.huadong;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.graphics.Xfermode;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;

import java.lang.ref.WeakReference;

public class CircleImageView extends ImageView {

    private Paint mPaint;
    private Xfermode mXfermode = new PorterDuffXfermode(PorterDuff.Mode.DST_IN);
    private Bitmap mMaskBitmap;
    private WeakReference<Bitmap> mWeakBitmap;

    //图片相关的属性
    private int type;                           //类型，圆形或者圆角
    public static final int TYPE_CIRCLE = 0;
    public static final int TYPE_ROUND = 1;
    private static final int BODER_RADIUS_DEFAULT = 10;     //圆角默认大小值
    private int mBorderRadius;                  //圆角大小


    public CircleImageView(Context context) {
        this(context, null);
    }

    public CircleImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        //取出attrs中我们为View设置的相关值
        TypedArray tArray = context.obtainStyledAttributes(attrs, R.styleable.CircleImageView);
        mBorderRadius = tArray.getDimensionPixelSize(R.styleable.CircleImageView_Radius, BODER_RADIUS_DEFAULT);
        type = tArray.getInt(R.styleable.CircleImageView_type, TYPE_CIRCLE);
        tArray.recycle();
    }

    public CircleImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if (type == TYPE_CIRCLE) {
            int width = Math.min(getMeasuredWidth(), getMeasuredHeight());
            setMeasuredDimension(width, width);    //设置当前View的大小
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {

        //在缓存中取出bitmap
        Bitmap bitmap = mWeakBitmap == null ? null : mWeakBitmap.get();
        if (bitmap == null || bitmap.isRecycled()) {
            //获取图片宽高
            Drawable drawable = getDrawable();
            int width = drawable.getIntrinsicWidth();
            int height = drawable.getIntrinsicHeight();

            if (drawable != null) {
                bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
                Canvas drawCanvas = new Canvas(bitmap);
                float scale = 1.0f;
                if (type == TYPE_ROUND) {
                    scale = Math.max(getWidth() * 1.0f / width, getHeight()
                            * 1.0f / height);
                } else {
                    scale = getWidth() * 1.0F / Math.min(width, height);
                }
                //根据缩放比例，设置bounds，相当于缩放图片了
                drawable.setBounds(0, 0, (int) (scale * width),
                        (int) (scale * height));

                drawable.draw(drawCanvas);
                if (mMaskBitmap == null || mMaskBitmap.isRecycled()) {
                    mMaskBitmap = getBitmap();
                }

                mPaint.reset();
                mPaint.setFilterBitmap(false);
                mPaint.setXfermode(mXfermode);

                //绘制形状
                drawCanvas.drawBitmap(mMaskBitmap, 0, 0, mPaint);

                //bitmap缓存起来，避免每次调用onDraw，分配内存
                mWeakBitmap = new WeakReference<Bitmap>(bitmap);

                //绘制图片
                canvas.drawBitmap(bitmap, 0, 0, null);
                mPaint.setXfermode(null);

            }
        }
        if (bitmap != null) {
            mPaint.setXfermode(null);
            canvas.drawBitmap(bitmap, 0.0f, 0.0f, mPaint);
            return;
        }
    }

    //缓存Bitmap，避免每次OnDraw都重新分配内存与绘图
    @Override
    public void invalidate() {
        mWeakBitmap = null;
        if (mWeakBitmap != null) {
            mMaskBitmap.recycle();
            mMaskBitmap = null;
        }
        super.invalidate();
    }

    //定义一个绘制形状的方法

    private Bitmap getBitmap() {
        Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(),
                Bitmap.Config.ARGB_8888);

        Canvas canvas = new Canvas(bitmap);
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);   //抗锯齿
        paint.setColor(Color.BLACK);
        if (type == TYPE_ROUND) {
            canvas.drawRoundRect(new RectF(0, 0, getWidth(), getHeight()),
                    mBorderRadius, mBorderRadius, paint);
        } else {
            canvas.drawCircle(getWidth() / 2, getWidth() / 2, getWidth() / 2, paint);
        }
        return bitmap;
    }
}

fg_info.xml里还用到了一些图片，自己找照片放到mipmap里就ok，color也自定义加到values里的color里就ok，然后用到的styles的代码我贴一下，大家也可以自定义，加到styles文件里就行。

<style name="HorizonTalDivider">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">1dp</item>
    <item name="android:layout_marginLeft">10dp</item>
    <item name="android:layout_marginRight">10dp</item>
    <item name="android:background">@color/div_white</item>
</style>
<style name="BigDivider">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">8dp</item>
    <item name="android:background">@color/div_white</item>
</style>

重点来咯

MyInfo.java

package com.example.asus.huadong;

import android.app.AlertDialog;
import android.support.v4.app.Fragment;
import android.content.Context;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ScrollView;
import android.widget.TextView;

public class MyInfo extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fg_info,null);
        return view;
    }
    private ScrollView myscroll;
    private Button changename;
    private Button chosegender;
    private Button choseold;
    private Button chosetall;
    private Button choseweight;
    private String strname;
    private SPUtils shh;
    private Context mContext;
    private Context myContext;
    private AlertDialog alert = null;
    private AlertDialog.Builder builder = null;

        @Override
        public void onActivityCreated(Bundle savedInstanceState) {
            super.onActivityCreated(savedInstanceState);
            myContext = getActivity();
            mContext = getActivity().getApplicationContext();
            bindViews();
        }

    private void bindViews() {
        myscroll = (ScrollView) getActivity().findViewById(R.id.myscroll);
        //mname= (EditText)getActivity().findViewById(R.id.edname);
        changename = (Button)getActivity().findViewById(R.id.myname);
        changename.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                AlertDialog.Builder builder = new AlertDialog.Builder(myContext,AlertDialog.THEME_DEVICE_DEFAULT_LIGHT);
                builder.setTitle("昵称");
                // 通过LayoutInflater来加载一个xml的布局文件作为一个View对象
                View view = LayoutInflater.from(myContext).inflate(
                        R.layout.dialog, null);
                // 设置我们自己定义的布局文件作为弹出框的Content
                builder.setView(view);

                final EditText mname = (EditText) view.findViewById(R.id.edname);

                builder.setPositiveButton("确定",
                        new DialogInterface.OnClickListener() {

                            @Override
                            public void onClick(DialogInterface dialog, int which) {
                                //确定操作的内容
                                strname=mname.getText().toString();
                                shh.put(mContext, "name", strname);
                                TextView myn=(TextView) getActivity().findViewById(R.id.my_name);
                                myn.setText("" + shh.get(mContext, "name", "佛系人生c"));
                            }
                        });

                builder.setNegativeButton("取消",
                        new DialogInterface.OnClickListener() {

                            @Override
                            public void onClick(DialogInterface dialog, int which) {
                                // TODO Auto-generated method stub
                            }
                        });
                builder.show();
            }
        });
        chosegender = (Button)getActivity().findViewById(R.id.mygender);
        chosegender.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                final String[] gender = new String[]{"男", "女"};
                alert = null;
                builder = new AlertDialog.Builder(myContext,AlertDialog.THEME_DEVICE_DEFAULT_LIGHT);
                int i;
                if(shh.get(mContext, "gender", "男")=="男")
                {
                    i=0;
                }
                else{
                    i=1;
                }
                alert = builder.setTitle("性别")
                        .setSingleChoiceItems(gender, i, new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialog, int which) {
                                //Toast.makeText(getActivity(), "你的性别是" + gender[which], Toast.LENGTH_SHORT).show();
                                shh.put(mContext, "gender", gender[which]);
                                TextView myg = (TextView) getActivity().findViewById(R.id.my_gender);
                                myg.setText("" + shh.get(mContext, "gender", "男"));
                                alert.dismiss();
                            }
                        }).create();
                alert.show();
            }
        });

        choseold = (Button)getActivity().findViewById(R.id.myold);
        choseold.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int size = 151;
                // 定义数组
                final String[] old = new String[size];
                for(int x = 0; x < 151; x = x+1) {
                    old[x]=x+" 岁";
                }
                int o= (int)(shh.get(mContext, "oldwhich", 0));
                alert = null;
                builder = new AlertDialog.Builder(myContext,AlertDialog.THEME_DEVICE_DEFAULT_LIGHT);
                builder.setView(myscroll);
                alert = builder.setTitle("年龄")
                        .setSingleChoiceItems(old, o, new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialog, int which) {
                                shh.put(mContext, "old", old[which]);
                                shh.put(mContext, "oldwhich", which);
                                TextView myo = (TextView) getActivity().findViewById(R.id.my_old);
                                myo.setText("" + shh.get(mContext, "old", "0 岁"));
                                alert.dismiss();
                            }
                        }).create();
                alert.show();
            }
        });

        chosetall = (Button)getActivity().findViewById(R.id.mytall);
        chosetall.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int size = 201;
                // 定义数组
                final String[] tall = new String[size];
                for(int x = 50; x < 251; x = x+1) {
                    tall[x-50]=x+" 厘米";
                }
                int j= (int)(shh.get(mContext, "tallwhich", 0));
                alert = null;
                builder = new AlertDialog.Builder(myContext,AlertDialog.THEME_DEVICE_DEFAULT_LIGHT);
                builder.setView(myscroll);
                alert = builder.setTitle("身高")
                        .setSingleChoiceItems(tall, j, new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialog, int which) {
                               // Toast.makeText(getActivity(), "你的身高是" + tall[which], Toast.LENGTH_SHORT).show();
                                shh.put(mContext, "tall", tall[which]);
                                shh.put(mContext, "tallwhich", which);
                                TextView myt = (TextView) getActivity().findViewById(R.id.my_tall);
                                myt.setText("" + shh.get(mContext, "tall", "50 厘米"));
                                alert.dismiss();
                            }
                        }).create();
                alert.show();
            }
        });
        choseweight = (Button)getActivity().findViewById(R.id.myweight);
        choseweight.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int size = 241;
                // 定义数组
                int k= (int)(shh.get(mContext, "weightwhich", 0));
                final String[] weight = new String[size];
                for (int x = 10; x < 251; x = x + 1) {
                    weight[x - 10] = x + " 公斤";
                }
                alert = null;
                builder = new AlertDialog.Builder(myContext,AlertDialog.THEME_DEVICE_DEFAULT_LIGHT);
                builder.setView(myscroll);
                alert = builder.setTitle("体重")
                        .setSingleChoiceItems(weight, k, new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialog, int which) {
                               // Toast.makeText(getActivity(), "你的体重是" + weight[which], Toast.LENGTH_SHORT).show();
                                shh.put(mContext, "weight", weight[which]);
                                shh.put(mContext, "weightwhich", which);
                                TextView myw = (TextView) getActivity().findViewById(R.id.my_weight);
                                myw.setText("" + shh.get(mContext, "weight", "10 公斤"));
                                alert.dismiss();
                            }
                        }).create();
                alert.show();
            }
        });
        }
    @Override
    public void onStart() {
        super.onStart();
        TextView myn=(TextView) getActivity().findViewById(R.id.my_name);
        myn.setText("" + shh.get(mContext, "name", "佛系人生c"));
        TextView myo = (TextView) getActivity().findViewById(R.id.my_old);
        myo.setText("" + shh.get(mContext, "old", "0 岁"));
        TextView myg=(TextView) getActivity().findViewById(R.id.my_gender);
        TextView myt=(TextView) getActivity().findViewById(R.id.my_tall);
        TextView myw=(TextView) getActivity().findViewById(R.id.my_weight);
        myg.setText(""+shh.get(mContext, "gender","男"));
        myt.setText(""+shh.get(mContext, "tall","50 厘米"));
        myw.setText(""+shh.get(mContext, "weight","10 公斤"));
    }
}

上面用到了SharedPreference工具类是那位写Android入门教程的大哥在教程里提供的，详细可以看一下他的讲解，百度一下Android菜鸟教程就有啦，是这样的：

SPUtils.java

package com.example.asus.huadong;

import android.content.Context;
import android.content.SharedPreferences;

import java.util.Map;

public class SPUtils {
    public static final String FILE_NAME = "my_sp";
    public static void put(Context context, String key, Object obj) {
        SharedPreferences sp = context.getSharedPreferences(FILE_NAME, context.MODE_PRIVATE);
        SharedPreferences.Editor editor = sp.edit();
        if (obj instanceof Boolean) {
            editor.putBoolean(key, (Boolean) obj);
        } else if (obj instanceof Float) {
            editor.putFloat(key, (Float) obj);
        } else if (obj instanceof Integer) {
            editor.putInt(key, (Integer) obj);
        } else if (obj instanceof Long) {
            editor.putLong(key, (Long) obj);
        } else {
            editor.putString(key, (String) obj);
        }
        editor.commit();
    }


    /**
     * 获取指定数据
     */
    public static Object get(Context context, String key, Object defaultObj) {
        SharedPreferences sp = context.getSharedPreferences(FILE_NAME, context.MODE_PRIVATE);
        if (defaultObj instanceof Boolean) {
            return sp.getBoolean(key, (Boolean) defaultObj);
        } else if (defaultObj instanceof Float) {
            return sp.getFloat(key, (Float) defaultObj);
        } else if (defaultObj instanceof Integer) {
            return sp.getInt(key, (Integer) defaultObj);
        } else if (defaultObj instanceof Long) {
            return sp.getLong(key, (Long) defaultObj);
        } else if (defaultObj instanceof String) {
            return sp.getString(key, (String) defaultObj);
        }
        return null;
    }

    /**
     * 删除指定数据
     */
    public static void remove(Context context, String key) {
        SharedPreferences sp = context.getSharedPreferences(FILE_NAME, context.MODE_PRIVATE);
        SharedPreferences.Editor editor = sp.edit();
        editor.remove(key);
        editor.commit();
    }


    /**
     * 返回所有键值对
     */
    public static Map<String, ?> getAll(Context context) {
        SharedPreferences sp = context.getSharedPreferences(FILE_NAME, context.MODE_PRIVATE);
        Map<String, ?> map = sp.getAll();
        return map;
    }

    /**
     * 删除所有数据
     */
    public static void clear(Context context) {
        SharedPreferences sp = context.getSharedPreferences(FILE_NAME, context.MODE_PRIVATE);
        SharedPreferences.Editor editor = sp.edit();
        editor.clear();
        editor.commit();
    }

    /**
     * 检查key对应的数据是否存在
     */
    public static boolean contains(Context context, String key) {
        SharedPreferences sp = context.getSharedPreferences(FILE_NAME, context.MODE_PRIVATE);
        return sp.contains(key);
    }
}

对话框示例效果图，可以修改昵称，性别、年龄、体重。
第一次使用默认值，第一次修改后的数据将保存在共享偏好中，下次打开就可以默认读取共享偏好里的数据啦~
适合用于个人信息，那种基本不变的信息存储，应该就像默认登陆一样的感觉吧哈哈

emmmmm大概就是这样吧，如果有哪里写错了，请多多指教，我这边运行是ok的，笔记完成！！！

本文地址：https://blog.csdn.net/weixin_43910309/article/details/107144534