系统的整理总结一下MD风格的控件以及使用:
包括:
Toolbar 、AppBarLayout 、CoordinatorLayout、 CollapsingToolbarLayout 、
自定义behavior 、DrawerLayout+NavigationView 、 CardView 、RecvclerView 、TabLayout和menu菜单
以及behavior 和 scrollFlags 等属性总结
可以说是总结md 风格的内容比较完整的一篇文章
先上第一张效果图:
代码实现:
需要的依赖:
compile 'com.android.support:appcompat-v7:23.4.0'
compile 'com.android.support:design:23.2.0'
compile 'de.hdodenhof:circleimageview:2.2.0'
compile 'com.android.support:cardview-v7:22.2.1'
compile 'com.github.bumptech.glide:glide:3.7.0'
compile 'com.google.code.gson:gson:2.2.4'
compile 'com.squareup.okhttp3:okhttp:3.4.1'
xml布局:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawerlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!--一个加强版FrameLayout 可一件挺所有子控件的各种事件-->
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!--AppBarLayout对子view进行嵌套
因为下面rv添加app:layout_behavior属性,
support library包含了一个特殊的字符串资源@string/appbar_scrolling_view_behavior,
它的值为android.support.design.widget.AppBarLayout$ScrollingViewBehavior ,
指向AppBarLayout.ScrollingViewBehavior,用来通知AppBarLayout 这个特殊的view何时发生了滚动事件,
这个behavior需要设置在触发滚动事件的view之上。
另外,ScrollingViewBehavior除了能处理滚动行为,
还能使设置了app:layout_behavior="@string/appbar_scrolling_view_behavior"的view显示在AppBarLayout的下面。
而不是叠加在AppBarLayout上。
当CoordinatorLayout发现RecyclerView中定义了这个属性,
它会搜索自己所包含的其他view,看看是否有view与这个behavior相关联。
AppBarLayout.ScrollingViewBehavior描述了RecyclerView与AppBarLayout之间的依赖关系。
RecyclerView的任意滚动事件都将触发AppBarLayout或者AppBarLayout里面view的改变。
AppBarLayout里面定义的view只要设置了app:layout_scrollFlags属性,就可以在RecyclerView滚动事件发生的时候被触发:-->
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true">
<!--CollapsingToolbarLayout继承帧布局
可折叠的父布局状态栏
layout_scrollFlags:设置滚动事件,srcoll这个属性view才会滚处于屏幕,否则会一直固定在顶部,如果滑动一部分再保留
加上exitUntilCollapsed
contentScrim:折叠完成后bar的颜色
theme:是为了让toolbar上的menu菜单显示亮色主题
-->
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentScrim="@color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!--parallax 让图片产生一定偏移-->
<ImageView
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/background"
app:layout_collapseMode="parallax" />
<!--pin属性保证toolbar在父布局折叠时一直固定-->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/recycle"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
<!--包名.类调用 给fab设置了自定义behavior效果 随着列表的滚动消失和出现-->
<android.support.design.widget.FloatingActionButton
app:layout_behavior="com.example.dl.materialdesigndemo.behavior.FooterBehavior"
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="15dp"
android:elevation="8dp"
android:src="@mipmap/ic_launcher" />
</android.support.design.widget.CoordinatorLayout>
<!--设置了头布局和下面的menu列表-->
<android.support.design.widget.NavigationView
android:fitsSystemWindows="true"
android:id="@+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/nav_header"
app:menu="@menu/nav_menu"/>
</android.support.v4.widget.DrawerLayout>
RecyclerView行布局和适配器
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#e1e0e0"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.v7.widget.CardView
android:layout_margin="5dp"
app:cardCornerRadius="8dp"
app:cardElevation="8dp"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:scaleType="centerCrop"
android:id="@+id/item_iv"
android:layout_width="120dp"
android:layout_height="180dp" />
</android.support.v7.widget.CardView>
</RelativeLayout>
适配器:
public class RvAdapter extends RecyclerView.Adapter<RvAdapter.ViewHolder>{
private List<PiceBean.ResultsBean> datas = new ArrayList<>();
private Context context;
public RvAdapter(Context context) {
this.context = context;
}
public void setDatas(List<PiceBean.ResultsBean> datas) {
this.datas = datas;
notifyDataSetChanged();
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item,parent,false);
ViewHolder holder = new ViewHolder(view);
return holder;
}
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
holder.item_iv.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(context,SecondAcitivity.class);
context.startActivity(intent);
}
});
Glide.with(context).load(datas.get(position).getUrl()).into(holder.item_iv);
}
@Override
public int getItemCount() {
if (datas!= null){
return datas.size();
}
return 0;
}
class ViewHolder extends RecyclerView.ViewHolder{
ImageView item_iv;
public ViewHolder(View itemView) {
super(itemView);
item_iv = itemView.findViewById(R.id.item_iv);
}
}
}
activity中核心代码:
public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
private DrawerLayout drawlayout;
private NavigationView navigationView;
private RecyclerView rv;
private RvAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//5.0系统才能将状态栏设置成透明
if (Build.VERSION.SDK_INT>=21){
View decorView = getWindow().getDecorView();
decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
|View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
getWindow().setStatusBarColor(Color.TRANSPARENT);
}
setContentView(R.layout.activity_main);
initView();
initData();
}
//复写该方法导入menu菜单布局
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.maintoolbar, menu);
return true;
}
//复写该方法menu点击监听
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.backup:
Toast.makeText(this, "backup", Toast.LENGTH_SHORT).show();
break;
case R.id.deltet:
Toast.makeText(this, "delete", Toast.LENGTH_SHORT).show();
break;
case R.id.settings:
Toast.makeText(this, "setting", Toast.LENGTH_SHORT).show();
break;
case android.R.id.home:
//左上角菜单键,打开侧滑菜单
drawlayout.openDrawer(GravityCompat.START);
break;
}
return true;
}
private void initView() {
toolbar = (Toolbar) findViewById(R.id.toolbar);
//设置toolbar
setSupportActionBar(toolbar);
drawlayout = (DrawerLayout) findViewById(R.id.drawerlayout);
navigationView = (NavigationView) findViewById(R.id.nav_view);
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
//是左上角按键出现
actionBar.setDisplayHomeAsUpEnabled(true);
//给左上角按键设置图片
actionBar.setHomeAsUpIndicator(R.drawable.ic_drawer_home);
}
//侧滑菜单点击监听
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.nav_call:
Toast.makeText(MainActivity.this, "打电话", Toast.LENGTH_SHORT).show();
break;
case R.id.nav_friend:
Toast.makeText(MainActivity.this, "找朋友", Toast.LENGTH_SHORT).show();
break;
}
drawlayout.closeDrawers();
return true;
}
});
rv = (RecyclerView) findViewById(R.id.recycle);
}
private void initData() {
adapter = new RvAdapter(this);
final GridLayoutManager manager = new GridLayoutManager(this, 3);
OkHttpClient client = new OkHttpClient();
Request request = new Request.Builder().url("http://gank.io/api/data/%E7%A6%8F%E5%88%A9/50/1")
.build();
client.newCall(request).enqueue(new Callback() {
@Override
public void onFailure(Call call, IOException e) {
}
@Override
public void onResponse(Call call, final Response response) throws IOException {
final String responeseStr = response.body().string();
runOnUiThread(new Runnable() {
@Override
public void run() {
Gson gson = new Gson();
PiceBean bean = gson.fromJson(responeseStr, PiceBean.class);
adapter.setDatas(bean.getResults());
rv.setLayoutManager(manager);
rv.setAdapter(adapter);
}
});
}
});
}
}
menu 菜单
<?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">
<!--always总是显示该item-->
<item
android:id="@+id/backup"
android:icon="@drawable/backup"
android:title="Backup"
app:showAsAction="always"/>
<!--ifRoom如果toolbar控件足够则显示-->
<item
android:id="@+id/deltet"
android:icon="@drawable/delete"
android:title="Deltet"
app:showAsAction="ifRoom"/>
<!--never不显示item,会在右上角出现三个点图标里-->
<item
android:id="@+id/settings"
android:icon="@mipmap/ic_launcher"
android:title="Settings"
app:showAsAction="never"/>
</menu>
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<!--让这些menu成为一个组 single属性表示可以单选-->
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_call"
android:icon="@mipmap/ic_launcher"
android:title="Call"/>
<item
android:id="@+id/nav_friend"
android:icon="@mipmap/ic_launcher"
android:title="Friend"/>
<item
android:id="@+id/nav_location"
android:icon="@mipmap/ic_launcher"
android:title="Location"/>
<item
android:id="@+id/nav_mail"
android:icon="@mipmap/ic_launcher"
android:title="Mail"/>
<item
android:id="@+id/nav_task"
android:icon="@mipmap/ic_launcher"
android:title="Task"/>
</group>
</menu>
最后是自定义behavior !
public class FooterBehavior extends CoordinatorLayout.Behavior {
private int directionChange;
public FooterBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
}
//返回我们需要关心的类,因为我们要关心AppBarLayout的滑动
@Override
public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
return dependency instanceof AppBarLayout;
}
//fab 跟随关心的类变化对我们设置Behavior的View进行一系列处理
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
float translationY = Math.abs(dependency.getY());
child.setTranslationY(translationY);
return true;
}
}
到目前第一个效果图解释的很清楚了
下面大同小异会减少注释
第二张效果图:
把tablayout放入appbarlayout 并给tablayout一个behavior不滑动出屏幕
CollapsingToolbarLayout不设置contentScrim属性,那么折叠后显示子布局图片
<?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:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_barlayout"
android:layout_width="match_parent"
android:layout_height="270dp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="8"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/b"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android: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>
Tablayout与ViewPager联动
TabLayout tablayout = (TabLayout) findViewById(R.id.tablayout);
tablayout.setupWithViewPager(vp);