Android实现个人中心设置界面

带点击事件的升级版请点击我的另一篇博客：点击打开博客链接

本先上效果图：

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

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

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

2）画布局 RelativeLayout

效果图：

布局代码

 <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/h_back"
            android:layout_width="match_parent"
            android:layout_height="200dp" />

        <ImageView
            android:id="@+id/h_head"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_centerInParent="true" />
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@id/h_back"
            android:orientation="horizontal"
            android:layout_marginBottom="20dp">

            <ImageView
               android:id="@+id/user_line"
                android:layout_width="1dp"
                android:layout_height="25dp"
                android:layout_marginLeft="15dp"
                android:layout_centerHorizontal="true"
                android:background="@color/white"/>

            <TextView
                android:id="@+id/user_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toLeftOf="@id/user_line"
                android:textSize="17sp"
                android:textColor="@color/white"
                android:text="张三"/>

            <TextView
                android:id="@+id/user_val"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="15dp"
                android:textSize="17sp"
                android:textColor="@color/white"
android:layout_toRightOf="@id/user_line"
                android:text="182****5882"/>
        </RelativeLayout>

    </RelativeLayout>

Java代码：

 Glide.with(this).load(R.drawable.head)
                .bitmapTransform(new BlurTransformation(this, 25), new CenterCrop(this))
                .into(blurImageView);

        Glide.with(this).load(R.drawable.head)
                .bitmapTransform(new CropCircleTransformation(this))
                .into(avatarImageView);

以上就是实现头部磨砂布局代码
2.下面讲个人中心实现

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

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

2）自定义属性参数

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

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

4）自定义view继承LinearLayout

获取设置的属性，动态设置给对应的控件

解释代码：

加载布局LayoutInflater.from(getContext()).inflate(R.layout.item_view,this);

获取设置属性对象：

TypedArray ta=context.obtainStyledAttributes(attrs,R.styleable.item_view);

获取控件，设置属性值：isbootom = ta.getBoolean(R.styleable.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.item_view_show_text));
imageView.setBackgroundResource(ta.getResourceId(R.styleable.item_view_show_leftimg, R.drawable.setting));

回收属性对象：ta.recycle();

以上就是完整实现设置中心的代码。想要项目代码，下载地址。