Android学习之CoordinatorLayout轻松实现360软件详情页

今天在项目中，遇见实现类似360软件详情页的效果，结合现在比较流行的Material design，采用了CoordinatorLayout来实现这个效果，跟大家分享一下。

首先，看一下需求的效果，由于不会搞gif图，所以图是从翔哥那抠出来的，效果是一样的。

中部导航栏在滑上去后会顶在窗口顶部，隐藏顶部部分，下拉的时候又将顶部显示出来，这样的效果，现在也比较常见了，现在带大家了解一下我的实现方式

首先，必须添加design依赖

  //noinspection GradleCompatiblecompile 'com.android.support:design:24.0.0-alpha1'

然后就是如何布局了

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"android:orientation="vertical"tools:context="test1.up72.com.myapplication.MainActivity"><android.support.design.widget.CoordinatorLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><android.support.design.widget.AppBarLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:background="@color/white"><FrameLayoutandroid:layout_width="match_parent"android:layout_height="208dp"android:background="@color/grey_200"app:layout_scrollFlags="scroll|enterAlways|snap"><Viewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:background="@drawable/ic_bg_daobo" /></FrameLayout><Viewandroid:layout_width="match_parent"android:layout_height="1dp"android:background="@color/grey_300" /><android.support.design.widget.TabLayoutandroid:id="@+id/tabLayout"android:layout_width="match_parent"android:layout_height="wrap_content"app:tabGravity="fill"app:tabIndicatorColor="@color/colorPrimary"app:tabSelectedTextColor="@color/colorPrimary"app:tabTextColor="@color/grey_900" /></android.support.design.widget.AppBarLayout><android.support.v4.view.ViewPagerandroid:id="@+id/viewPager"android:layout_width="match_parent"android:layout_height="match_parent"app:layout_behavior="@string/appbar_scrolling_view_behavior" /></android.support.design.widget.CoordinatorLayout>
</LinearLayout>

这里讲解一下，整个布局其实都是被CoordinatorLayout包裹。

CoordinatorLayout的作用
一：作为顶层布局。
二：协调子布局。

AppBarLayout 是继承LinerLayout实现的一个ViewGroup容器组件，它是为了Material Design设计的App Bar，

支持手势滑动操作。

默认的AppBarLayout是垂直方向的，它的作用是把AppBarLayout包裹的内容都作为AppBar。

AppBarLayout是支持手势滑动效果的，不过的跟CoordinatorLayout配合使用

以上是大神讲解的，比我说的清楚。简而言之

CoordinatorLayout与AppBarLayout结合使用来实现手势的滑动效果。

要实现滑动效果，有三个必须实现条件。

1.必须设置CoordinatorLayout作为顶层布局

2.必须将滑动隐藏布局设置 app:layout_scrollFlags=”scroll|enterAlways”属性，”scroll|exitUntilCollapsed”也可以，只不过实现效果不一样。

3.将滑动的view设置app:layout_behavior=”@string/appbar_scrolling_view_behavior”属性

上面可以看出Flamelayout实现条件2，viewPager实现条件3

scroll: 所有想滚动出屏幕的view都需要设置这个flag，没有设置这个flag的view将被固定在屏幕顶部。例如，TabLayout 没有设置这个值，将会停留在屏幕顶部。

enterAlways:设置这个flag时，向下的滚动都会导致该view变为可见，启用快速“返回模式”。

enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。

package test1.up72.com.myapplication;import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;import java.util.ArrayList;public class MainActivity extends AppCompatActivity {private TabLayout tabLayout;private FragmentAdapter adapter;private ViewPager viewPager;private String title[];@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);viewPager = (ViewPager) findViewById(R.id.viewPager);tabLayout = (TabLayout) findViewById(R.id.tabLayout);title = this.getResources().getStringArray(R.array.star_user_info);viewPager.setAdapter(adapter = new FragmentAdapter(getSupportFragmentManager(), this, getFragments(), title));tabLayout.setupWithViewPager(viewPager);tabLayout.setTabMode(TabLayout.MODE_FIXED);}private ArrayList<Fragment> getFragments() {ArrayList<Fragment> fragments = new ArrayList<>();fragments.add(new Fragment1());fragments.add(new Fragment2());fragments.add(new Fragment3());return fragments;}
}

这里就很简单啦，Tablayout，ViewPager，三个Fragment，然后在里面实现RecylerView效果

Fragmen实现列表效果，填充数据

package test1.up72.com.myapplication;import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;import java.util.ArrayList;/*** Created by wangchang on 2016/3/31.*/
public class Fragment1 extends Fragment {private RecyclerView recyclerView;private NewAdapter adapter;@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {return inflater.inflate(R.layout.fragment_eye, container, false);}@Overridepublic void onActivityCreated(@Nullable Bundle savedInstanceState) {super.onActivityCreated(savedInstanceState);recyclerView = (RecyclerView) getActivity().findViewById(R.id.recylerview);recyclerView.setHasFixedSize(true);recyclerView.setLayoutManager(new LinearLayoutManager(getActivity(), LinearLayoutManager.VERTICAL, false));recyclerView.setAdapter(adapter = new NewAdapter());adapter.replaceAll(getData());}public ArrayList<NewsModel> getData() {ArrayList<NewsModel> list = new ArrayList<>();for (int i = 0; i < 20; i++) {NewsModel model = new NewsModel();model.setItem("简介" + i);list.add(model);}return list;}
}

适配器的实现

package test1.up72.com.myapplication;import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;import java.util.ArrayList;/*** Created by wangchang on 2016/3/29.*/
public class NewAdapter extends RecyclerView.Adapter<NewAdapter.BaseViewHolder> {private ArrayList<NewsModel> dataList = new ArrayList<>();public void replaceAll(ArrayList<NewsModel> list) {dataList.clear();if (list != null) {dataList.addAll(list);}notifyDataSetChanged();}@Overridepublic NewAdapter.BaseViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {return new NewViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.adapter_new_list, parent, false));}@Overridepublic void onBindViewHolder(NewAdapter.BaseViewHolder holder, int position) {holder.setData(dataList.get(position));}@Overridepublic int getItemCount() {return dataList != null ? dataList.size() : 0;}public class BaseViewHolder extends RecyclerView.ViewHolder {public BaseViewHolder(View itemView) {super(itemView);}void setData(Object data) {}}private class NewViewHolder extends BaseViewHolder {private TextView tv;public NewViewHolder(View view) {super(view);tv = (TextView) view.findViewById(R.id.tv);}@Overridevoid setData(Object data) {if (data != null) {NewsModel model = (NewsModel) data;tv.setText(model.getItem());}}}
}

这样就是先啦，先看看我实现的效果图吧

这里设置exitUntilCollapsed，enterAlways会实现两种不同的滑动效果，exitUntilCollapsed会实现当滑动列表滑到顶端才会实现隐藏效果，enterAlways会实现只有上滑就会隐藏顶部的效果。

附上代码下载地址

http://pan.baidu.com/s/1bpr0xBp

就到这里啦，下班。

Android学习之CoordinatorLayout轻松实现360软件详情页相关推荐

Android 自定义控件轻松实现360软件详情页
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 转载请标 ...
JavaWeb学习-案例练习-图书管理前台-10- 图书详情页的实现
前面一篇实现了前端图书列表的分页操作,可以点击上一页和下一页,这个我们实现每个页面显示4本书,实际开发中,一般设置20条记录或者40条记录,这个实现原理是一样的.这篇来学习,在前端页面点击这本书的名称 ...
Android自定义ScrollView实现仿拉手团购详情页标题
我们在做商品详情页的时候,一般是有一个商品的标题的,那么商品详情一般都是比较长的,然后手机屏幕又比较小,这样往下拉的时候就看不到商品标题以及退出,分享,收藏按钮了,这样用户体验是不好的.相信大家都用过 ...
android学习笔记---53_采用网页设计软件界面,以及使用android系统内置的浏览器,利用js调用java方法
Java技术qq交流群:JavaDream:251572072 2013/5/16 53_采用网页设计软件界面 ------------------------------ 1.注意这里可以把网页放到 ...
小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发
一.常用组件在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
android仿制应用宝的应用详情页
最近看到了应用宝的软件详情页,感觉不明觉厉的样子, 于是粗略的仿制了一下,发现做的还算是可以出来见人吧实现方法很简单,就是通过重写ScrollView的分发事件,详情请看代码. public cla ...
Android自定义View实现自动无限轮播,点击图片进入详情页
图片接口 http://120.27.23.105/ad/getAd 需要导入Glide设置图片的依赖 compile 'com.github.bumptech.glide:glide:3.7.0' ...
360软件管家android,360软件管家
<360软件管家>,一款手机必备的软件管理平台.你可以通过这款软件来下载各种安全无毒的游戏.软件,还可以卸载掉各种顽固的插件和软件,让你的手机不再卡顿.快来下载体验一下吧. 软件详情 36 ...
初学者---Android 学习资料
转自: 1.hanhailong/AndroidStudyResources https://github.com/hanhailong/AndroidStudyResources 2.Android ...
Android 学习论坛博客及网站推荐 1
Android 学习论坛博客及网站推荐一.博客推荐 1)http://blog.csdn.net/android_tutor (Android开发入门基础,高级进阶) 2)http://blog.c ...

Android学习之CoordinatorLayout轻松实现360软件详情页

Android学习之CoordinatorLayout轻松实现360软件详情页相关推荐

最新文章

热门文章