1.BottomSheetDialog用法
效果图：
图片.png
图片.png
1.1特点就是从底部弹出，内容超过屏幕的3/5会自动折叠，可以向上滑到顶部，往下滑，可以让Dialog消失
1.2主要代码如下：bottom_sheet_share_dialog.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@drawable/share_sina" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="微博分享"
android:textColor="@color/black"
android:textSize="15sp" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:layout_marginLeft="45dp"
android:alpha="0.7"
android:background="@android:color/darker_gray" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@drawable/share_evernote" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="印象笔记分享"
android:textColor="@color/black"
android:textSize="15sp" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:layout_marginLeft="45dp"
android:alpha="0.7"
android:background="@android:color/darker_gray" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@drawable/share_youdao" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="有道分享"
android:textColor="@color/black"
android:textSize="15sp" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:layout_marginLeft="45dp"
android:alpha="0.7"
android:background="@android:color/darker_gray" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@drawable/share_wechat" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="微信分享"
android:textColor="@color/black"
android:textSize="15sp" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:layout_marginLeft="45dp"
android:alpha="0.7"
android:background="@android:color/darker_gray" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@drawable/share_friends" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="朋友圈分享"
android:textColor="@color/black"
android:textSize="15sp" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:layout_marginLeft="45dp"
android:background="@android:color/darker_gray" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@drawable/share_more" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="其他"
android:textColor="@color/black"
android:textSize="15sp" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:layout_marginLeft="45dp"
android:alpha="0.7"
android:background="@android:color/darker_gray" />
</LinearLayout>
1.3.关键的初始化代码
private void showShareDialog(){
mBottomSheetDialog = new BottomSheetDialog(this);
View view = LayoutInflater.from(this).inflate(R.layout.bottom_sheet_share_dialog,null);
mBottomSheetDialog.setContentView(view);
mBottomSheetDialog.setCancelable(true);
mBottomSheetDialog.setCanceledOnTouchOutside(true);
mBottomSheetDialog.show();
}
2.ToolBar用法简介
图片.png
图片.png
2.1原生的ToolBar
xml文件布局
<android.support.v7.widget.Toolbar
android:id="@+id/tool_bar_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:visibility="gone"
toolbar:navigationIcon="@drawable/ic_book_list"
toolbar:title="@string/toolbar_title"
toolbar:titleTextColor="@color/white"
toolbar:theme="@style/ToolbarTheme"
toolbar:popupTheme="@style/ThemeOverlay.AppCompat.Light"
>
菜单文件：setting_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="@+id/btn_sure"
android:title="确定"
app:showAsAction="always"
/>
<item android:id="@+id/item_collect"
android:icon="@drawable/ic_favorite_more"
android:title="收藏"
app:showAsAction="ifRoom"
/>
</menu>
初始化代码：
private void initToolbar2(){
Toolbar toolbar2= (Toolbar) findViewById(R.id.tool_bar_2);
mToolbar2 = toolbar2;
toolbar2.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
//添加溢出菜单
toolbar2.inflateMenu(R.menu.setting_menu);
// 添加菜单点击事件
toolbar2.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()){
case R.id.item_collect:
//点击设置菜单
Toast.makeText(getApplicationContext(),"收藏",Toast.LENGTH_SHORT).show();
break;
}
return false;
}
});
}
2.2 ToolBar 中添加一个 编辑框
xml布局：
<android.support.v7.widget.Toolbar
android:id="@+id/tool_bar_4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
toolbar:navigationIcon="@mipmap/navigation_back_white"
toolbar:theme="@style/ToolbarTheme"
>
<EditText
android:id="@+id/edit_search"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="@color/white"
/>
</android.support.v7.widget.Toolbar>
menu_search.xml文件
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="@+id/item_search"
android:title="search"
android:icon="@drawable/ic_search"
app:showAsAction="always"
/>
</menu>
初始化代码
private void initToolbar4(){
mToolbar4 = (Toolbar) findViewById(R.id.tool_bar_4);
mToolbar4.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
mToolbar4.inflateMenu(R.menu.menu_search);
mToolbar4.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
if(item.getItemId() == R.id.item_search){
// do search
}
return false;
}
});
// 获取ToolBar 上的编辑框
EditText searchEdit = (EditText) mToolbar4.findViewById(R.id.edit_search);
// 获取内容
String content = searchEdit.getText().toString();
}
3.CoordinatorLayout +AppbarLayout+CollapsingToolbarLayout+Toolbar使用
图片.png
3.1. appbar_layout_ac.xml布局文件
layout_collapseMode ="pin" 固定模式，在折叠的时候最后将所有的内容，包括title，左返回键，右边菜单键都固定在顶端
layout_collapseMode ="parallax" 和layout_collapseMode ="none" 差不多，一般不用
enterAlways:设置这个flag时，向上滚动时候，整个CollapsingToolbarLayout退出屏幕，当向下的滚动都会导致整个CollapsingToolbarLayout先变为可见，然后才能开始下滑”//滑动范围为整个CollapsingToolbarLayout的高度
scroll:所有想滚动出屏幕的view都需要设置这个flag，没有设置这个flag的view将被固定在屏幕顶部
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapse_layout"
android:layout_width="match_parent"
android:layout_height="250dp"
app:contentScrim="@color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<ImageView
android:id="@+id/iv_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/meizhi"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="@+id/appbar_layout_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="AppbarLayout"
app:titleTextColor="@color/white"
app:navigationIcon="@mipmap/navigation_back_white"
app:layout_collapseMode="pin"
/>
//parallax ：视差模式和设置成none类似(一般不用)
//“pin”：固定模式，在折叠的时候最后将所有的内容，包括title，左边返回键，右边菜单键都固定在顶端；
//exitUntilCollapsed:向上滚动中间包裹内容渐渐退出屏幕，toolbar最后折叠在顶端。滑动返回为去掉toolbar的高度
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
>
//appbar_scrolling_view_behavior让NestedScrollView内容最终能够显示在AppBarLayout的下面,否则会显示在顶部
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="18dp"
android:text="@string/large_text"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
3.2 关键代码：
private void initView(){
final Toolbar toolbar = (Toolbar) findViewById(R.id.appbar_layout_toolbar);
StatusBarUtils.setTranslucentImageHeader(this,0,toolbar);//沉浸状态栏
toolbar.setTitle("toolbar");
toolbar.inflateMenu(R.menu.menu_search);
AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbar_layout);
iv_content= (ImageView) findViewById(R.id.iv_content);
final CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapse_layout);
collapsingToolbarLayout.setTitle("");
collapsingToolbarLayout.setCollapsedTitleTextColor(getResources().getColor(R.color.white));
collapsingToolbarLayout.setExpandedTitleColor(getResources().getColor(R.color.white));
collapsingToolbarLayout.setExpandedTitleColor(Color.TRANSPARENT);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
Log.e("Asmewill","appbarHeight:"+appBarLayout.getHeight()+" getTotalScrollRange:"+appBarLayout.getTotalScrollRange()+" offSet:"+verticalOffset);
if(Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()){//到顶部了
toolbar.bringToFront();//滑动到顶部的时候，让整个toolbar添加的ViewGroup顶端
}else{
collapsingToolbarLayout.setTitle("");
}
}
});
}
打印数据：
图片.png
4.下面是一些案例
4.1.AppbarLayout实践之仿简书首页效果
图片.png
。
图片.png
janshu_activity_layouts.xml文件：
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:background="@color/white"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/jianshu_appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
app:elevation="0dp"
>
<com.bigkoo.convenientbanner.ConvenientBanner
android:id="@+id/banner"
android:layout_width="match_parent"
android:layout_height="200dp"
app:canLoop="true"
app:layout_scrollFlags="scroll"
android:visibility="visible"
/>
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll"
android:scrollbars="none"
android:layout_marginLeft="15dp"
android:layout_marginTop="10dp"
android:visibility="visible"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView
android:id="@+id/item_label1"
android:layout_width="130dp"
android:layout_height="50dp"
android:textColor="@color/white"
android:textSize="15sp"
android:text="小说精选"
android:gravity="center"
android:background="@drawable/label_shape"
/>
<TextView
android:id="@+id/item_label2"
android:layout_width="130dp"
android:layout_height="50dp"
android:textColor="@color/white"
android:textSize="15sp"
android:layout_marginLeft="5dp"
android:text="摄影游记"
android:gravity="center"
android:background="@drawable/label_shape2"
/>
<TextView
android:id="@+id/item_label3"
android:layout_width="130dp"
android:layout_height="50dp"
android:textColor="@color/white"
android:textSize="15sp"
android:text="漫画手绘"
android:layout_marginLeft="5dp"
android:gravity="center"
android:background="@drawable/label_shape3"
/>
<TextView
android:id="@+id/item_label4"
android:layout_width="130dp"
android:layout_height="50dp"
android:textColor="@color/white"
android:textSize="15sp"
android:text="签约作者"
android:layout_marginLeft="5dp"
android:gravity="center"
android:background="@drawable/label_shape4"
/>
</LinearLayout>
</HorizontalScrollView>
<EditText
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_marginLeft="15dp"
android:layout_marginTop="10dp"
android:layout_marginRight="15dp"
android:hint="搜索简书的内容和朋友"
android:gravity="center"
android:background="@drawable/edti_text_shape"
android:layout_marginBottom="5dp"
/>
<!--app:layout_scrollFlags="scroll|enterAlways"这个设置是关键-->
<!--enterAlways下滑的时候，可以让view立即悬浮显示,否则只能下滑到顶部，
往下拖动才会显示，此时该View不算在可滑动的范围之内-->
<View
android:id="@+id/line_divider"
android:layout_width="match_parent"
android:layout_height="1px"
android:background="@android:color/darker_gray"
android:layout_marginBottom="10dp"
android:visibility="gone"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/swipe_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="@+id/vertical_recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
/>
</android.support.v4.widget.SwipeRefreshLayout>
</android.support.design.widget.CoordinatorLayout>
关键代码：
private void initView() {
mAppBarLayout = (AppBarLayout) findViewById(R.id.jianshu_appbar_layout);
mLine = findViewById(R.id.line_divider);
mConvenientBanner = (ConvenientBanner) findViewById(R.id.banner);
mRecyclerView = (RecyclerView) findViewById(R.id.vertical_recyclerView);
LinearLayoutManager manager = new LinearLayoutManager(this);
manager.setOrientation(LinearLayoutManager.VERTICAL);
mRecyclerView.setLayoutManager(manager);
MyAdapter myAdapter = new MyAdapter();
mRecyclerView.setAdapter(myAdapter);
myAdapter.setData(mockData());
myAdapter.notifyDataSetChanged();
mConvenientBanner.setPages(new CBViewHolderCreator<NetworkImageHolderView>() {
@Override
public NetworkImageHolderView createHolder() {
return new NetworkImageHolderView();
}
}, Arrays.asList(images));
mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if(Math.abs(verticalOffset) >= mAppBarLayout.getTotalScrollRange()){
mLine.setVisibility(View.VISIBLE);
}else{
mLine.setVisibility(View.GONE);
}
}
});
final SwipeRefreshLayout swipe_layout = (SwipeRefreshLayout) findViewById(R.id.swipe_layout);
swipe_layout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh() {
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
Toast.makeText(getApplicationContext(),"refresh",Toast.LENGTH_LONG).show();
swipe_layout.setRefreshing(false);
}
},2000);
}
});
}
5.AppbarLaoyut之仿百度贴吧页标题栏效果（只要往下拉，就立即显示title栏）
图片.png
5.1.xml布局文件
关键设置代码就是：app:layout_scrollFlags="scroll|enterAlways"
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.zhouwei.md.materialdesignsamples.asmewill.BDTieBaActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<RelativeLayout
android:id="@+id/rl_title"
android:layout_width="match_parent"
app:layout_scrollFlags="scroll|enterAlways"
android:layout_height="50dp">
<ImageView
android:id="@+id/iv_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:src="@mipmap/navigation_back_white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="百度贴吧"
android:textSize="16sp"
android:textColor="#ffffff" />
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/vertical_recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
6.仿网贷之家，可折叠显示的TitleBar
关键代码： app:layout_scrollFlags="scroll|enterAlways"
图片.png
<?xml version="1.0" encoding="utf-8"?>
<!--
~ /*
~ *
~ * *
~ * * * ===================================
~ * * * Copyright (c) 2016.
~ * * * 作者：安卓猴
~ * * * 微博：@安卓猴
~ * * * 博客：http://sunjiajia.com
~ * * * Github：https://github.com/opengit
~ * * *
~ * * * 注意**：如果您使用或者修改该代码，请务必保留此版权信息。
~ * * * ===================================
~ * *
~ * *
~ *
~ */
-->
<!--
CoordinatorLayout是这次新添加的一个增强型的FrameLayout，通过它可以实现很多东西：
例如：
1.界面向上滚动逐渐隐藏Toolbar；
2.在其中可以放置浮动的View，就像Floating Action Button。
-->
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/id_coordinatorlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
>
<!--
AppBarLayout跟它的名字一样，把容器类的组件全部作为AppBar。
将AppBarLayout放在CoordinatorLayout中，就可以实现滚动效果。
本例中，TabLayout在界面滚动时，随着Toolbar的逐渐隐藏，将占据Toolbar的位置，
达到节省屏幕空间，界面动画效果的目的。
-->
<android.support.design.widget.AppBarLayout
android:id="@+id/id_appbarlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<!--
属性解析：
app:theme：指定Toolbar的样式，包括ActionbarToggle和popupMenu的指示图标颜色
app:popupTheme：指定popupMenu溢出后的样式
app:title: 指定Toolbar中主Title的内容
-->
<!--
app:layout_scrollFlags的意思是：
设置的layout_scrollFlags有如下几种选项：
scroll: 所有想滚动出屏幕的view都需要设置这个flag- 没有设置这个flag的view将被固定在屏幕顶部。
enterAlways: 这个flag让任意向下的滚动都会导致该view变为可见，启用快速“返回模式”。
enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
exitUntilCollapsed: 当视图会在滚动时，它一直滚动到设置的minHeight时完全隐藏。
需要注意的是，后面两种模式基本只有在CollapsingToolbarLayout才有用，
而前面两种模式基本是需要一起使用的，也就是说，这些flag的使用场景，基本已经固定了。
-->
<android.support.v7.widget.Toolbar
android:id="@+id/id_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:title="@string/toolbar_title"
/>
<!--
Tabs选项卡，和ViewPager搭配使用可以增大界面的内容展示量，实现各种个性化分类内容展示而不互相干扰！
Google在Design support library中提供官方的Tab组件，它就是TabLayout。
相比Github上面开源的第三方库，这个更加简单易用。
有以下常用属性：
app:tabGravity="fill" 表示TabLayout中的Tabs要占满屏幕的width；
app:tabSelectedTextColor：Tab被选中字体的颜色；
app:tabTextColor：Tab未被选中字体的颜色；
app:tabIndicatorColor：Tab指示器下标的颜色；
-->
<android.support.design.widget.TabLayout
android:id="@+id/id_tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabIndicatorColor="@color/main_white"
/>
</android.support.design.widget.AppBarLayout>
<!--
我们常用的ViewPager，不多说了。你会发现多了一个 app:layout_behavior 属性，没错，
如果你使用CoordinatorLayout来实现Toolbar滚动渐变消失动画效果，那就必须在它下面的那个控件中加入这个属性，
并且下面的这个控件必须是可滚动的。
当设置了layout_behavior的控件滑动时，就会触发设置了layout_scrollFlags的控件发生状态的改变。
-->
<android.support.v4.view.ViewPager
android:id="@+id/id_viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
/>
<!--
这是一个浮动按钮。由于FloatingActionButton是重写ImageView的，
所有FloatingActionButton拥有ImageView的一切属性。
属性介绍：
app:backgroundTint : FAB的背景色。
app:elevation ：FAB的阴影效果。
app:rippleColor ：设置涟漪的颜色，默认是由背景色生成的暗色调，可以自己指定。
app:pressedTranslationZ ：FAB动画效果，在它被按下的时候阴影就会增大。
-->
<android.support.design.widget.FloatingActionButton
android:id="@+id/id_floatingactionbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:src="@mipmap/ic_action_plusone"
app:backgroundTint="@color/fab_red"
app:elevation="6dp"
app:fabSize="normal"
app:pressedTranslationZ="12dp"
app:rippleColor="@color/main_blue_dark"
/>
</android.support.design.widget.CoordinatorLayout>
7.TabLaoyut用法示例一
图片.png
xml：
<?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
"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/Cf2f2f5"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="@dimen/px140"
app:tabBackground="@color/Cffffff"
app:tabIndicatorColor="@color/Ce60012"
app:tabMode="scrollable"
app:tabSelectedTextColor="@color/Ce60012"
app:tabTextColor="@color/C888888"
android:id="@+id/tabLayout">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/viewPager">
</android.support.v4.view.ViewPager>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="[图片上传失败...(image-c20c3-1512460665673)]
http://schemas.android.com/apk/res/android
"
xmlns:app="[图片上传失败...(image-b877f9-1512460665673)]
http://schemas.android.com/apk/res-auto
"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/Cf2f2f5"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="@dimen/px140"
app:tabBackground="@color/Cffffff"
app:tabIndicatorColor="@color/Ce60012"
app:tabMode="scrollable"
app:tabSelectedTextColor="@color/Ce60012"
app:tabTextColor="@color/C888888"
android:id="@+id/tabLayout">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/viewPager">
</android.support.v4.view.ViewPager>
</LinearLayout>
TabLayout使用方式
protected void initView(Bundle savedInstanceState) {
//viewpaer和tabLayout绑定
String[] tabs=this.getResources().getStringArray(R.array.order_tabs);
List<TabBean> list=new ArrayList<>();
for(int i=0;i<tabs.length;i++){
TabBean tabBean=new TabBean();
tabBean.setTitle(tabs[i]);
switch (i){
//全部 0
case 0:
tabBean.setType(i+"");
break;
//待支付1
case 1:
tabBean.setType(i+"");
break;
//待接单2
case 2:
tabBean.setType(i+"");
break;
//待发货3
case 3:
tabBean.setType(i+"");
break;
//待收货
case 4:
tabBean.setType("31");
break;
//已完成
case 5:
tabBean.setType("4");
break;
//已取消
case 6:
tabBean.setType("30");
break;
}
list.add(tabBean);
}
orderFragmentAdapter=new OrderFragmentAdapter(getSupportFragmentManager(),list);
viewPager.setAdapter(orderFragmentAdapter);
tabLayout.setupWithViewPager(viewPager);
}
OrderFragment.java中构造方法
public static AllOrderFragment newInstance(String type) {
Bundle bundle = new Bundle();
bundle.putString("type", type);
AllOrderFragment allOrderFragment = new AllOrderFragment();
allOrderFragment.setArguments(bundle);
return allOrderFragment;
}
OrderFragmentAdapter.java中构造方法
public class OrderFragmentAdapter extends FragmentPagerAdapter {
List<TabBean> list;
public OrderFragmentAdapter(FragmentManager fm, List<TabBean> list) {
super(fm);
this.list=list;
}
@Override
public AllOrderFragment getItem(int position) {
return AllOrderFragment.newInstance(list.get(position).getType());
}
@Override
public int getCount() {
return list==null?0:list.size();
}
@Override
public CharSequence getPageTitle(int position) {
return list.get(position).getTitle();
}
}
网友评论