利用CoordinatorLayout+AppBarLayout+TabLayout+ViewPager+RecycleView实现最简单的个人主页
首先看效果图，这几乎是最简单的实现可滑动头部，RecycleView 滑动到顶部时，头部View出来。
代码实现
XML布局文件：
<android.support.design.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:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingBottom="10dp"
app:layout_scrollFlags="scroll">
<ImageView
android:id="@+id/person_user_head_icon"
android:layout_width="57dp"
android:layout_height="57dp"
android:layout_marginTop="10dp"
android:scaleType="centerCrop"
android:src="@mipmap/ic_launcher_round" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:text="用户昵称" />
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:scaleType="fitCenter"
android:src="@mipmap/ic_launcher_round" />
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="车辆信息" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="35dp"
android:layout_marginTop="10dp"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:text="粉丝" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:text="1000" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:text="关注" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:text="1000" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:text="获赞" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1000" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:background="@drawable/shape_deep_blue"
android:paddingBottom="5dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="5dp"
android:text="关注" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/shape_deep_blue"
android:paddingBottom="5dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="5dp"
android:text="私信" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/community_container_tab_container"
android:layout_width="match_parent"
android:layout_height="45dp"
android:gravity="bottom"
android:paddingBottom="5dp">
<android.support.design.widget.TabLayout
android:id="@+id/community_container_tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#943c41"
app:tabSelectedTextColor="#000000"
app:tabTextColor="#1d1c1d"
android:background="@color/colorPrimary"
app:tabMode="scrollable">
</android.support.design.widget.TabLayout>
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<com.ldx.canvasdrawdemo.CustomViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
</com.ldx.canvasdrawdemo.CustomViewPager>
</android.support.design.widget.CoordinatorLayout>
Activity代码：
public class MainActivity177 extends AppCompatActivity {
private TabLayout tabLayout;
private CustomViewPager viewPager;
private List<MyFragment> bodyFragments;
private ImageView mHeaderIcon;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main177);
tabLayout = findViewById(R.id.community_container_tab_layout);
viewPager = findViewById(R.id.viewPager);
mHeaderIcon = findViewById(R.id.person_user_head_icon);
mHeaderIcon.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
final CustomDialog customDialog = new CustomDialog(MainActivity177.this);
customDialog.setAwardGetNum(10);
customDialog.setmClickListener(new CustomDialog.ViewClickListener() {
@Override
public void onClick(View view) {
if (customDialog != null) {
customDialog.dismiss();
}
}
});
customDialog.show();
}
});
bodyFragments = new ArrayList<>();
MyFragment myFragment1 = new MyFragment();
myFragment1.setmTitle("ta回答的");
MyFragment myFragment2 = new MyFragment();
myFragment2.setmTitle("ta得到的");
bodyFragments.add(myFragment1);
bodyFragments.add(myFragment2);
FragmentPagerAdapter mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return bodyFragments.get(position);
}
@Override
public int getCount() {
return bodyFragments.size();
}
//ViewPager与TabLayout绑定后，这里获取到PageTitle就是Tab的Text
@Override
public CharSequence getPageTitle(int position) {
return bodyFragments.get(position).getmTitle();
}
};
viewPager.setAdapter(mAdapter);
viewPager.setOffscreenPageLimit(2);
tabLayout.setupWithViewPager(viewPager);//将TabLayout和ViewPager关联起来。
}
}
MyFragment:
public class MyFragment extends Fragment {
private String mTitle;
private RecyclerView recyclerView;
private SmartRefreshLayout smartRefreshLayout;
private RecyclerAdapter recyclerAdapter;
private ArrayList<String> mData;
public void setmTitle(String mTitle) {
this.mTitle = mTitle;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
final View view =inflater.inflate(R.layout.fragment,container,false);
recyclerView= (RecyclerView) view.findViewById(R.id.recyclerView);
smartRefreshLayout = view.findViewById(R.id.smart_refresh_layout);
smartRefreshLayout.setEnableLoadMore(true);
smartRefreshLayout.setOnLoadMoreListener(new OnLoadMoreListener() {
@Override
public void onLoadMore(@NonNull RefreshLayout refreshLayout) {
view.postDelayed(new Runnable() {
@Override
public void run() {
mData.add("222222222222222222");
mData.add("222222222222222222");
mData.add("222222222222222222");
mData.add("222222222222222222");
mData.add("222222222222222222");
recyclerAdapter.notifyItemRangeInserted(mData.size() - 6,5);
smartRefreshLayout.finishLoadMore();
}
}, 2000);
}
});
smartRefreshLayout.setOnRefreshListener(new OnRefreshListener() {
@Override
public void onRefresh(@NonNull RefreshLayout refreshLayout) {
view.postDelayed(new Runnable() {
@Override
public void run() {
mData.clear();
mData.add("3333333333333333333333333");
mData.add("3333333333333333333333333");
mData.add("3333333333333333333333333");
mData.add("3333333333333333333333333");
mData.add("3333333333333333333333333");
mData.add("3333333333333333333333333");
mData.add("3333333333333333333333333");
mData.add("3333333333333333333333333");
recyclerAdapter.notifyDataSetChanged();
smartRefreshLayout.finishRefresh();
}
}, 2000);
}
});
smartRefreshLayout.setDisableContentWhenRefresh(true);
smartRefreshLayout.setDisableContentWhenLoading(true);
mData = new ArrayList<>();
mData.add("111111111111111111111");
mData.add("111111111111111111111");
mData.add("111111111111111111111");
mData.add("111111111111111111111");
mData.add("111111111111111111111");
mData.add("111111111111111111111");
mData.add("111111111111111111111");
mData.add("111111111111111111111");
mData.add("111111111111111111111");
mData.add("111111111111111111111");
mData.add("111111111111111111111");
mData.add("111111111111111111111");
recyclerView.setLayoutManager(new LinearLayoutManager(getContext()));
recyclerAdapter=new RecyclerAdapter(getActivity(),mData);
recyclerView.setAdapter(recyclerAdapter);
return view;
}
public String getmTitle() {
return mTitle;
}
}
布局 文件：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.scwang.smartrefresh.layout.SmartRefreshLayout
android:id="@+id/smart_refresh_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.scwang.smartrefresh.layout.header.ClassicsHeader
android:layout_width="match_parent"
android:layout_height="wrap_content">
</com.scwang.smartrefresh.layout.header.ClassicsHeader>
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.scwang.smartrefresh.layout.footer.ClassicsFooter
android:layout_width="match_parent"
android:layout_height="wrap_content">
</com.scwang.smartrefresh.layout.footer.ClassicsFooter>
</com.scwang.smartrefresh.layout.SmartRefreshLayout>
</LinearLayout>
下拉刷新和上拉加载更多控件为： implementation 'com.scwang.smartrefresh:SmartRefreshLayout:1.1.0-alpha-20’
RecyclerAdapter：
public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.MyViewHolder> {
private ArrayList<String> mData;
private Context mContext;
public RecyclerAdapter(Context context,ArrayList<String> list){
mData = list;
mContext = context;
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item,parent,false);
MyViewHolder viewHolder =new MyViewHolder(view);
return viewHolder;
}
@Override
public void onBindViewHolder(MyViewHolder myViewHolder, int position) {
}
@Override
public int getItemCount() {
return mData.size();
}
static class MyViewHolder extends RecyclerView.ViewHolder
{
private TextView textView;
private ImageView imageView;
public MyViewHolder(View itemview)
{
super(itemview);
textView= (TextView) itemview.findViewById(R.id.content);
imageView= (ImageView) itemview.findViewById(R.id.image);
}
}
}
RecycleView子布局：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:id="@+id/list_item">
<ImageView
android:id="@+id/image"
android:layout_width="80dp"
android:layout_height="80dp"
android:scaleType="fitCenter"
android:src="@mipmap/ic_launcher_round" />
<TextView
android:id="@+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我是内容！"/>
</LinearLayout>
CustomViewPager：
public class CustomViewPager extends ViewPager {
private float mDownY;
private float mDownX;
public CustomViewPager(@NonNull Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
boolean touch = super.onTouchEvent(ev);
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
mDownY = ev.getY();
mDownX = ev.getX();
break;
case MotionEvent.ACTION_MOVE:
//左右滑动
if (Math.abs(ev.getY() - mDownY) - Math.abs(ev.getX() - mDownX) > 0) {
touch = false;
}
break;
case MotionEvent.ACTION_UP:
break;
}
return touch;
}
}
以上就是全部代码，几乎不用写什么逻辑，就做出了图中效果，CoordinatorLayout真不错。