Android实现个人中心设置界面

个人中心界面在每个APP上都会出现，相信大家一定不会陌生吧！在这篇文章中，我将实现个人中心设置界面，先看看效果图：

 一、1.顶部磨砂图像背景以及圆形头像实现：

1）build.gradle中添加以下依赖：

compile 'com.github.bumptech.glide:glide:3.7.0' 
compile 'jp.wasabeef:glide-transformations:2.0.1'

2）画布局RelativeLayout

3）实现头部磨砂布局代码Java代码：

//实现个人中心头部磨砂布局
blurImageView= view.findViewById(R.id.iv_blur);
avatarImageView = view.findViewById(R.id.iv_avatar);
Glide.with(this).load(R.drawable.head).bitmapTransform(newBlurTransformation(getActivity(), 25), new CenterCrop(getActivity())).into(blurImageView);
Glide.with(this).load(R.drawable.head).bitmapTransform(new CropCircleTransformation(getActivity())).into(avatarImageView);

二、下面讲个人中心实现

经分析我们发现这个列表项都是相同的重复布局，只是前面的图标和中间的文字是不同，那么我们可以考虑自定义一个布局，通过自定义属性设置它的图标和文字。然后放到一个LinearLayout布局中就可以实现这个列表界面。

1）自定义一个布局，实现如图效果：  

2）自定义属性参数：

顺序分别为：是否显示下划线/左边图标/显示的文字；

3）布局中引入自定义的命名空间/设置相关属性：

 

 

4）自定义view继承LinearLayout，获取设置的属性，动态设置给对应的控件；

import android.content.Context;
import android.content.res.TypedArray;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

/**
 * 自定义一个布局，通过自定义属性设置它的图标和文字,
 * 然后放到一个LinearLayout布局中就可以实现这个列表界面。
 */
public class Fragment4_item_view extends LinearLayout {
    private ImageView imageView;//item的图标
    private TextView textView;//item的文字
    private ImageView bottomview;
    private boolean isbootom=true;//是否显示底部的下划线
    public Fragment4_item_view(Context context) {
        this(context,null);
    }
    public Fragment4_item_view(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,-1);
    }
    public Fragment4_item_view(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        //加载布局
        LayoutInflater.from(getContext()).inflate(R.layout.fragment_item4_view,this);
        //获取设置属性对象
        TypedArray ta=context.obtainStyledAttributes(attrs,R.styleable.Fragment4_item_view);
        //获取控件，设置属性值
        isbootom=ta.getBoolean(R.styleable.Fragment4_item_view_show_bottomline,true);
        bottomview=findViewById(R.id.item_bottom);
        imageView=findViewById(R.id.item_img);
        textView=findViewById(R.id.item_text);

        textView.setText(ta.getString(R.styleable.Fragment4_item_view_show_text));
        imageView.setBackgroundResource(ta.getResourceId(R.styleable.Fragment4_item_view_show_leftimg,R.drawable.setting));
        //回收属性对象
        ta.recycle();
        initview();
    }
    private void initview(){
        //如果isbootom为true，显示下划线，否则隐藏
        if(isbootom){
            bottomview.setVisibility(View.VISIBLE);
        }else{
            bottomview.setVisibility(View.GONE);
        }
    }


}

以上全部代码： 

 

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import com.bumptech.glide.Glide;
import com.bumptech.glide.load.resource.bitmap.CenterCrop;
import jp.wasabeef.glide.transformations.BlurTransformation;
import jp.wasabeef.glide.transformations.CropCircleTransformation;


public class Fragment4 extends Fragment {
    private View view;
    ImageView blurImageView;
    ImageView avatarImageView;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        //引用创建好的xml布局
        view = inflater.inflate(R.layout.fragment_item4,container,false);
        return view;
    }
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);

        //实现个人中心头部磨砂布局
        blurImageView= view.findViewById(R.id.iv_blur);
        avatarImageView = view.findViewById(R.id.iv_avatar);
        Glide.with(this).load(R.drawable.head).bitmapTransform(new BlurTransformation(getActivity(), 25), new CenterCrop(getActivity())).into(blurImageView);
        Glide.with(this).load(R.drawable.head).bitmapTransform(new CropCircleTransformation(getActivity())).into(avatarImageView);
    }
}

import android.content.Context;
import android.content.res.TypedArray;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

/**
 * 自定义一个布局，通过自定义属性设置它的图标和文字,
 * 然后放到一个LinearLayout布局中就可以实现这个列表界面。
 */
public class Fragment4_item_view extends LinearLayout {
    private ImageView imageView;//item的图标
    private TextView textView;//item的文字
    private ImageView bottomview;
    private boolean isbootom=true;//是否显示底部的下划线
    public Fragment4_item_view(Context context) {
        this(context,null);
    }
    public Fragment4_item_view(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,-1);
    }
    public Fragment4_item_view(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        //加载布局
        LayoutInflater.from(getContext()).inflate(R.layout.fragment_item4_view,this);
        //获取设置属性对象
        TypedArray ta=context.obtainStyledAttributes(attrs,R.styleable.Fragment4_item_view);
        //获取控件，设置属性值
        isbootom=ta.getBoolean(R.styleable.Fragment4_item_view_show_bottomline,true);
        bottomview=findViewById(R.id.item_bottom);
        imageView=findViewById(R.id.item_img);
        textView=findViewById(R.id.item_text);

        textView.setText(ta.getString(R.styleable.Fragment4_item_view_show_text));
        imageView.setBackgroundResource(ta.getResourceId(R.styleable.Fragment4_item_view_show_leftimg,R.drawable.setting));
        //回收属性对象
        ta.recycle();
        initview();
    }
    private void initview(){
        //如果isbootom为true，显示下划线，否则隐藏
        if(isbootom){
            bottomview.setVisibility(View.VISIBLE);
        }else{
            bottomview.setVisibility(View.GONE);
        }
    }


}

 借鉴于https://www.jianshu.com/p/89840f06d53f