高仿简书个人中心页面

Demo下载地址：

先贴上效果图
在这里插入图片描述

1. 步骤

1.1 把APP的主题改为NoAction

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

1.2 引入Material Design 包

    implementation 'com.google.android.material:material:1.0.0'

1.3 新建activity_home_page.xml布局文件

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:orientation="vertical">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="95dp"
            app:expandedTitleGravity="center_vertical"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:expandedTitleTextAppearance="@style/title"          
            >
                /*
                    <style name="title">
                        <item name="android:textSize">17sp</item>
                    </style>
                */
            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="80dp"
                    android:scaleType="fitXY"
                    android:background="#D6D6D6" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="45dp"
                    android:orientation="vertical">
                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal">
                        <ImageView
                            android:layout_width="70dp"
                            android:layout_height="70dp"
                            android:layout_marginLeft="15dp"
                            android:background="#A6A6A6" />

                        <Button
                            android:id="@+id/bt_message"
                            android:layout_marginTop="40dp"
                            android:layout_toLeftOf="@id/bt_follow"
                            android:text="视信"
                            android:textColor="#03A9F4"
                            android:layout_width="60dp"
                            android:layout_height="40dp"
                            android:background="@drawable/bt_shape_blue"
                            />

                        <Button
                            android:layout_marginLeft="10dp"
                            android:layout_marginTop="40dp"
                            android:id="@+id/bt_follow"
                            android:text="关注"
                            android:textColor="#03A9F4"
                            android:layout_alignParentRight="true"
                            android:layout_width="60dp"
                            android:layout_height="40dp"
                            android:background="@drawable/bt_shape_blue"
                            />

                    </RelativeLayout>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_margin="8dp"

                        android:text="加入学习群，并与PurcellHuang一起学Android"
                        android:layout_height="wrap_content"/>
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal">

                        <TextView
                            android:layout_width="wrap_content"
                            android:text="26关注"
                            android:layout_margin="8dp"

                            android:layout_height="wrap_content"/>
                        <TextView
                            android:layout_margin="8dp"
                            android:layout_width="wrap_content"
                            android:text="26粉丝"
                            android:layout_height="wrap_content"/>
                        <TextView
                            android:layout_width="wrap_content"
                            android:text="26赞"
                            android:layout_margin="8dp"

                            android:layout_height="wrap_content"/>

                    </LinearLayout>




                </LinearLayout>



            </FrameLayout>



            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolBar"
                android:layout_width="match_parent"
                app:layout_collapseMode="pin"
                app:title="PurcellHuang"
                app:navigationIcon="@drawable/nav_ic_back"
                android:layout_height="?attr/actionBarSize" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>


        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tl_tabLayout"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="#F5F5F5"
            android:minHeight="50dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:tabIndicatorColor="#03A9F4"
            app:tabMode="fixed"
            app:tabSelectedTextColor="#03A9F4"
            app:tabTextColor="#A5A5A5" />


    </com.google.android.material.appbar.AppBarLayout>


    <androidx.viewpager.widget.ViewPager
        android:id="@+id/vp_viewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />


</androidx.coordinatorlayout.widget.CoordinatorLayout>

下边讲解一些属性：
scrollFlags的效果
scrollFlags一共有五个值，一些值是可以组合作用在View上的。五个值分别是：

scroll：子View随ScrollView一起滚动
enterAlways：只要ScrollView向下移动，子View立即响应滚动
enterAlwaysCollapsed：当ScrollView滚动最顶层时，子View响应滚动事件，直至子View完全显示
exitUtilCollapsed：只要ScrollView向上滚动，子View立即响应滚动，直到达到最小高度
snap：当Scrollview滚动到最顶层时，子View响应滚动事件。松开手指时，依据AppBarLayout移出屏幕区域与生育可视区域对比，自动移向占比大的区域。

titleMarginStart 标题距离(开始)左边的距离

CollapsingToolbarLayout控件以下的几个属性：

app:contentScrim=”?attr/colorPrimary” 当上滑到toolbar 高度期间直到达到toolbar高度时，给toolbar设置的背景色，以及过渡颜色。当然，这里不仅仅可以设置颜色，也可以设置图片。如果不设置该属性，标题栏会过渡为以之前的图片为背景。
app:layout_scrollFlags=”scroll” 和介绍 AppBarLayout 时，给Toolbar 设置和配置一样。
app:expandedTitleGravity=”center_horizontal” 从单词意思可以看出，这是展示后，title的位置。
app:expandedTitleMarginStart=”50dp” 从单词意思可以看出，这是展示后，title 距离开始位置的边距。
app:expandedTitleTextAppearance=”@style/transparentText” 展开后标题文字的样式
app:collapsedTitleTextAppearance=”@style/ToolbarTitle” 折叠后标题文字的样式

1.4 新建HomePageActivity.java文件


import android.os.Bundle;
import android.view.View;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;

import com.google.android.material.tabs.TabLayout;

import java.util.ArrayList;
import java.util.List;

/**
 * 用户主页
 * 展示用户个人信息
 */
public class HomePageActivity extends AppCompatActivity {

    private TabLayout tab_layout;
    private ViewPager viewPager;
    private MyTabAdapter myFragmentPagerAdapter;

    private List<Fragment> mList;
    private List<String> strings;

    private Toolbar toolbar;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home_page);

        initDate();

        initView();


    }

    private void initDate(){
        mList = new ArrayList<>();
        strings = new ArrayList<>();

        mList.add(new FragmentA());
        strings.add("动态");

        mList.add(new FragmentB());
        strings.add("视频");

        mList.add(new FragmentC());
        strings.add("更多");

    }

    private void initView(){

        toolbar = findViewById(R.id.toolBar);

        toolbar.setTitle("Mr.H");
        toolbar.setNavigationIcon(R.drawable.nav_ic_back);

        //点击左边返回按钮监听事件
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onBackPressed();
            }
        });

        tab_layout = findViewById(R.id.tl_tabLayout);
        viewPager = findViewById(R.id.vp_viewPager);

        myFragmentPagerAdapter = new MyTabAdapter(mList,strings,getSupportFragmentManager());

        viewPager.setAdapter(myFragmentPagerAdapter);

        //联动ViewPager
        tab_layout.setupWithViewPager(viewPager);

    }
}

1.5 一些java类Adapter、Fragment

FragmentA.java

package org.gpnu.mineui;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.DividerItemDecoration;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;


/**
 * 用户动态
 */
public class FragmentA extends Fragment {

    private RecyclerView rv_track;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_a,container,false);
        rv_track = view.findViewById(R.id.mRecyclerView);

        MyAdapter adapter = new MyAdapter();

        LinearLayoutManager layoutManager = new LinearLayoutManager(this.getContext());
        rv_track.setLayoutManager(layoutManager);

        rv_track.addItemDecoration(new DividerItemDecoration(this.getContext(), layoutManager.getOrientation()));//用类设置分割线

        rv_track.setAdapter(adapter);

        return view;
    }
}

MyTabAdapter.java

package org.gpnu.mineui;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;

import java.util.List;

public class MyTabAdapter extends FragmentPagerAdapter {
    private List<Fragment> mList;
    private List<String> strings;

    public MyTabAdapter(List<Fragment> mList, List<String> strings, @NonNull FragmentManager fm) {
        super(fm);
        this.mList = mList;
        this.strings = strings;
    }

    @NonNull
    @Override
    public Fragment getItem(int position) {
        return mList.get(position);
    }

    @Override
    public int getCount() {
        return strings.size();
    }

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {

        return strings.get(position);
    }
}

MyAdapter.java

package org.gpnu.mineui;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {

    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_view,parent,false);

        return new MyViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {

    }

    @Override
    public int getItemCount() {
        return 40;
    }

    class MyViewHolder extends RecyclerView.ViewHolder{

        TextView textView;

        public MyViewHolder(@NonNull View itemView) {
            super(itemView);

            textView = itemView.findViewById(R.id.tv_textview);
        }
    }
}

1.6 其他用的到一些布局文件

fragment_a.xml

<?xml version="1.0" encoding="utf-8"?>

<androidx.recyclerview.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mRecyclerView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

item_view.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/tv_textview"
        android:text="hahhahah"
        android:layout_width="match_parent"
        android:layout_height="80dp"/>

</LinearLayout>

PurcellHuang

发布了25 篇原创文章 · 获赞 13 · 访问量 5988

私信关注

高仿简书个人中心页面

高仿简书个人中心页面

1. 步骤

1.1 把APP的主题改为NoAction

1.2 引入Material Design 包

1.3 新建activity_home_page.xml布局文件

1.4 新建HomePageActivity.java文件

1.5 一些java类Adapter、Fragment

1.6 其他用的到一些布局文件

猜你喜欢