可折叠的ToolBar+抽屉菜单NavigationView+浮动按钮FloatButton
NoaCoburn
9年前
<h2>使用Material Design风格的ToolBar和抽屉导航</h2> <p>先看个简单的运行效果</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/735eaecc03e4521f6eedde3cc6f692fa.gif"></p> <p style="text-align:center">run</p> <h2>主要记录下布局的写法</h2> <h3>1 用到的Google Design依赖和V7包依赖</h3> <pre> <code class="language-java">compile 'com.android.support:cardview-v7:25.0.0' compile 'com.android.support:recyclerview-v7:25.0.0' compile 'com.android.support:design:25.0.0' compile 'com.android.support:appcompat-v7:25.0.0'</code></pre> <h3>2 主布局结构</h3> <p style="text-align:center"><img src="https://simg.open-open.com/show/74a50ca10a00fcd0eb54a46b5e2dff32.png"></p> <p style="text-align:center">主布局结构</p> <h3>3 主布局内容</h3> <pre> <code class="language-java"><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/drawer_main" android:layout_width="match_parent" android:layout_height="match_parent"> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"> <!--CoordinatorLayout 布局属性:FrameLayout--> <android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> <!--AppBar 布局属性:LinearLayout 默认子元素垂直排列--> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="200dp" android:fitsSystemWindows="true"> <!--提供了一个可以折叠的Toolbar 布局属性:FrameLayout--> <android.support.design.widget.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="match_parent" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <View android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/colorPrimary" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.5" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?android:attr/actionBarSize" app:contentInsetStart="0dp" app:layout_collapseMode="pin" app:title="@string/app_name" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:id="@+id/recycler" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/divider" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.design.widget.CoordinatorLayout> <!--Float Button--> <android.support.design.widget.FloatingActionButton android:id="@+id/float_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:layout_marginBottom="10dp" android:layout_marginEnd="10dp" android:src="@drawable/ic_action_important" app:elevation="10dp" /> </FrameLayout> <!--左侧抽屉--> <android.support.design.widget.NavigationView android:id="@+id/navigation" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/layout_navigation_header_main" app:menu="@menu/main_navigation"> </android.support.design.widget.NavigationView> </android.support.v4.widget.DrawerLayout></code></pre> <h3>4 抽屉导航头布局内容 (layout_navigation_header_main.xml)</h3> <pre> <code class="language-java"><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="200dp" android:background="@color/colorAccent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:drawablePadding="5dp" android:drawableStart="@mipmap/ic_launcher" android:gravity="center" android:text="@string/hello" android:textColor="@color/icons" android:textSize="20sp" /> </FrameLayout></code></pre> <h3>5 界面逻辑很简单,给RecyclerView绑定数据,抽屉菜单的打开关闭(MainActivity内容)</h3> <pre> <code class="language-java">public class MainActivity extends AppCompatActivity { private final String[] data = {"Hello,Word!", "Hello,Android!", "Hello,Material design!", "Hello,Word!", "Hello,Android!", "Hello,Material design!", "Hello,Word!", "Hello,Android!", "Hello,Material design!", "Hello,Word!", "Hello,Android!", "Hello,Material design!", "Hello,Word!", "Hello,Android!", "Hello,Material design!"}; private FloatingActionButton floatBtn; private DrawerLayout drawerLayout; @Override protected void onCreate(final Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); //设置ToolBar作为ActionBar setSupportActionBar(toolbar); ActionBar actionBar = getSupportActionBar(); if (actionBar != null) { //设置ActionBar左上角按钮 actionBar.setHomeAsUpIndicator(R.drawable.ic_nav); actionBar.setDisplayHomeAsUpEnabled(true); } drawerLayout = (DrawerLayout) findViewById(R.id.drawer_main); floatBtn = (FloatingActionButton) findViewById(R.id.float_btn); floatBtn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(MainActivity.this, "Float Button", Toast.LENGTH_SHORT).show(); } }); RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler); MyAdapter myAdapter = new MyAdapter(); recyclerView.setAdapter(myAdapter); recyclerView.setLayoutManager(new LinearLayoutManager(this)); } @Override public boolean onCreateOptionsMenu(Menu menu) { MenuInflater menuInflater = getMenuInflater(); menuInflater.inflate(R.menu.main_menu, menu); return super.onCreateOptionsMenu(menu); } @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case android.R.id.home: if (drawerLayout.isDrawerOpen(GravityCompat.START)) { drawerLayout.closeDrawers(); } else { drawerLayout.openDrawer(GravityCompat.START); } break; case R.id.menu_1: Toast.makeText(MainActivity.this, item.getTitle(), Toast.LENGTH_SHORT).show(); break; } return super.onOptionsItemSelected(item); } private class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> { class ViewHolder extends RecyclerView.ViewHolder { private TextView tv; ViewHolder(View itemView) { super(itemView); tv = (TextView) itemView.findViewById(R.id.tv); } } @Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_list, parent, false); return new ViewHolder(view); } @Override public void onBindViewHolder(ViewHolder holder, int position) { holder.tv.setText(data[holder.getAdapterPosition()]); } @Override public int getItemCount() { return data.length; } } }</code></pre> <h3>6 总结</h3> <ol> <li>Google提供的抽屉菜单(NavigationView)确实方便了许多,可以直接通过设置Menu资源作为抽屉菜单的菜单项,可以直接设置layout作为抽屉菜单的头部</li> <li>可折叠的ToolBar<br> ( CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout + Toolbar )使嵌套滚动的实现变得容易</li> <li>浮动按钮( <strong>FloatActionButton</strong> )也是方便了实现material design风格</li> </ol> <p> </p> <p>来自:http://www.jianshu.com/p/eef5878a7627</p> <p> </p>