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

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:zsg="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ebebef"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="个人中心"
        android:textSize="20dp"
        android:textColor="@color/white"
        android:background="@color/blue"
        />

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

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

        <ImageView
            android:id="@+id/iv_avatar"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_centerInParent="true" />
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@id/iv_blur"
            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="13276475747"/>
        </RelativeLayout>

    </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）自定义一个布局，实现如图效果：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="45dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    tools:context="com.example.administrator.demo05.Fragment4">
    <ImageView
        android:id="@+id/item_img"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_centerVertical="true"
        android:background="@drawable/setting" />
    <TextView
        android:id="@+id/item_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="10dp"
        android:layout_toRightOf="@id/item_img"
        android:gravity="center_vertical"
        android:text="设置中心"
        android:textColor="#050000"
        android:textSize="17sp" />
    <ImageView
        android:id="@+id/item_bottom"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_alignLeft="@id/item_text"
        android:layout_below="@id/item_img"
        android:layout_marginTop="10dp"
        android:background="#e9e5e5" />
    <ImageView
        android:id="@+id/item_iright"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:background="@drawable/right" />
</RelativeLayout>

2）自定义属性参数：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="Fragment4_item_view">
        <attr name="show_bottomline" format="boolean" />
        <attr name="show_leftimg" format="integer" />
        <attr name="show_text" format="string" />
    </declare-styleable>
</resources>

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

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

 <com.example.administrator.demo05.Fragment4_item_view
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        zsg:show_bottomline="true"
        zsg:show_leftimg="@drawable/shoucang"
        zsg:show_text="我的收藏" />

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);
        }
    }


}

以上全部代码：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:zsg="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ebebef"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="个人中心"
        android:textSize="20dp"
        android:textColor="@color/white"
        android:background="@color/blue"
        />

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

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

        <ImageView
            android:id="@+id/iv_avatar"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_centerInParent="true" />
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@id/iv_blur"
            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="13276475747"/>
        </RelativeLayout>

    </RelativeLayout>
    <com.example.administrator.demo05.Fragment4_item_view
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        zsg:show_bottomline="true"
        zsg:show_leftimg="@drawable/shoucang"
        zsg:show_text="我的收藏" />

    <com.example.administrator.demo05.Fragment4_item_view
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        zsg:show_bottomline="true"
        zsg:show_leftimg="@drawable/lishi"
        zsg:show_text="历史记录" />

    <com.example.administrator.demo05.Fragment4_item_view
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        zsg:show_bottomline="false"
        zsg:show_leftimg="@drawable/xiazai"
        zsg:show_text="离线缓存" />

    <com.example.administrator.demo05.Fragment4_item_view
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="@color/white"
        zsg:show_bottomline="true"
        zsg:show_leftimg="@drawable/update"
        zsg:show_text="版本更新" />

    <com.example.administrator.demo05.Fragment4_item_view
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        zsg:show_bottomline="false"
        zsg:show_leftimg="@drawable/about"
        zsg:show_text="关于" />


</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="45dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    tools:context="com.example.administrator.demo05.Fragment4">

    <ImageView
        android:id="@+id/item_img"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_centerVertical="true"
        android:background="@drawable/setting" />


    <TextView
        android:id="@+id/item_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="10dp"
        android:layout_toRightOf="@id/item_img"
        android:gravity="center_vertical"
        android:text="设置中心"
        android:textColor="#050000"
        android:textSize="17sp" />

    <ImageView
        android:id="@+id/item_bottom"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_alignLeft="@id/item_text"
        android:layout_below="@id/item_img"
        android:layout_marginTop="10dp"
        android:background="#e9e5e5" />

    <ImageView
        android:id="@+id/item_iright"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:background="@drawable/right" />

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="Fragment4_item_view">
        <attr name="show_bottomline" format="boolean" />
        <attr name="show_leftimg" format="integer" />
        <attr name="show_text" format="string" />
    </declare-styleable>
</resources>

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

Android实现个人中心设置界面

猜你喜欢