高仿简书个人中心页面

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.AppBarLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:fitsSystemWindows="true"android:orientation="vertical"><com.google.android.material.appbar.CollapsingToolbarLayoutandroid: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>*/<FrameLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><ImageViewandroid:layout_width="match_parent"android:layout_height="80dp"android:scaleType="fitXY"android:background="#D6D6D6" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="45dp"android:orientation="vertical"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><ImageViewandroid:layout_width="70dp"android:layout_height="70dp"android:layout_marginLeft="15dp"android:background="#A6A6A6" /><Buttonandroid: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"/><Buttonandroid: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><TextViewandroid:layout_width="wrap_content"android:layout_margin="8dp"android:text="加入学习群，并与PurcellHuang一起学Android"android:layout_height="wrap_content"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><TextViewandroid:layout_width="wrap_content"android:text="26关注"android:layout_margin="8dp"android:layout_height="wrap_content"/><TextViewandroid:layout_margin="8dp"android:layout_width="wrap_content"android:text="26粉丝"android:layout_height="wrap_content"/><TextViewandroid:layout_width="wrap_content"android:text="26赞"android:layout_margin="8dp"android:layout_height="wrap_content"/></LinearLayout></LinearLayout></FrameLayout><androidx.appcompat.widget.Toolbarandroid: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.TabLayoutandroid: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.ViewPagerandroid: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;@Overrideprotected 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() {@Overridepublic 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);//联动ViewPagertab_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@Overridepublic 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@Overridepublic Fragment getItem(int position) {return mList.get(position);}@Overridepublic int getCount() {return strings.size();}@Nullable@Overridepublic 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@Overridepublic MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_view,parent,false);return new MyViewHolder(view);}@Overridepublic void onBindViewHolder(@NonNull MyViewHolder holder, int position) {}@Overridepublic 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"><TextViewandroid:id="@+id/tv_textview"android:text="hahhahah"android:layout_width="match_parent"android:layout_height="80dp"/></LinearLayout>

高仿简书个人中心页面相关推荐

高仿简书Android,高仿简书个人中心页面
高仿简书个人中心页面 Demo下载地址: 先贴上效果图 1. 步骤 1.1 把APP的主题改为NoAction 1.2 引入Material Design 包 implementation 'com. ...
使用SwipeRefreshLayout和RecyclerView实现仿“简书”下拉刷新和上拉加载更多
原文地址: http://blog.csdn.net/leoleohan/article/details/50989549/ 一.概述我们公司目前开发的所有Android APP都是遵循iOS风格设 ...
高仿小红书引导页实现效果
代码地址如下: http://www.demodashi.com/demo/11739.html 演示效果 !暂时先借用小红帽图片素材的app效果来演示 [暂时先借用小红帽图片素材的app效果来演示] ...
android 仿简书评论,Android 开发仿简书登录框可删除内容或显示密码框的内容
简书App 是我很喜欢的一款软件.今天就模仿了一下他的登录框.先上图: 好了下面上代码,自定义ImgEditText 继承与EditText.重写一些方法. package lyf.myimgedit ...
Android点击按钮显示密码,Android 开发仿简书登录框可删除内容或显示密码框的内容...
简书App 是我很喜欢的一款软件.今天就模仿了一下他的登录框.先上图: 好了下面上代码,自定义ImgEditText 继承与EditText.重写一些方法. package lyf.myimgedit ...
android仿今日头条个人中心页面
android仿今日头条个人中心页面效果图实现步骤: 自定义ScrollView,添加一个反弹的动画代码: package com.example.administrator.gerenzhon ...
使用Chakra-UI封装简书的登录页面组件（React）
要求:使用chakra ui和react 框架将简书的登录页面的表单封装成独立的可重用的组件使用到的API: 注册API 请求方式:POST 请求地址: https://conduit.produc ...
实现简书个人中心UI效果
这两天比较闲,简单实现了一下个人中心页面scrollView嵌套的效果,也就是下边这个页面,大家感受一下先: JSDemo2.gif 首先讲下实现思路,很多人看到这个界面觉得是多个scrollView ...
hapi mysql项目实战路由初始化_用hapi.js mysql和nuxt.js(vue ssr)开发仿简书的博客项目...
前言: 预览: 开始: npm i 把mysql配置好 npm run server or npm run dev 实现功能: 用户: 登录.注册.用户资料修改,详情页面,类似于简书的文章数量.总字数 ...

高仿简书个人中心页面

高仿简书个人中心页面

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 其他用的到一些布局文件

高仿简书个人中心页面相关推荐

最新文章

热门文章