Design各控件的搭配使用2
16lz
2021-01-23
在上个版本的基础上增加个几个控件:
DrawerLayout+ActionBarDrawerToggle-----> 左侧Drawer的实现,比Android自带的更强大的MaterialDrawer
NavigationView
去掉了style.xml中的一些设置
背景模糊的Navigation Drawer。可以设置参数达到不同的模糊效果
https://github.com/charbgr/BlurNavigationDrawer
DrawerLayout+ActionBarDrawerToggle-----> 左侧Drawer的实现,比Android自带的更强大的MaterialDrawer
NavigationView
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" 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" tools:context=".MainActivity" > <android.support.design.widget.CoordinatorLayout android:id="@+id/coordinatorLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" > <!-- 第一部分:伸缩工具栏 --> <!-- AppBarLayout目前必须是第一个嵌套在CoordinatorLayout里面的子view --> <!-- AppBarLayout里面定义的view只要设置了app:layout_scrollFlags属性,就可以在RecyclerView滚动事件发生的时候被触发: --> <!-- app:layout_scrollFlags属性里面必须至少启用scroll这个flag,这样这个view才会滚动出屏幕,否则它将一直固定在顶部。 --> <!--可以使用的其他flag有:enterAlways: 一旦向上滚动这个view就可见。enterAlwaysCollapsed: 顾名思义,这个flag定义的是何时进入(已经消失之后何时再次显示)。假设你定义了一个最小高度(minHeight)同时enterAlways也定义了,那么view将在到达这个最小高度的时候开始显示,并且从这个时候开始慢慢展开,当滚动到顶部的时候展开完。exitUntilCollapsed: 同样顾名思义,这个flag时定义何时退出,当你定义了一个minHeight,这个view将在滚动到达这个最小高度的时候消失。 --> <!-- 记住,要把带有scroll flag的view放在前面,这样收回的view才能让正常退出,而固定的view继续留在顶部。 --> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="240dp" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" > <!-- 如果想制造toolbar的折叠效果,我们必须把Toolbar放在CollapsingToolbarLayout中: --> <!-- 通常,我们我们都是设置Toolbar的title,而现在,我们需要把title设置在CollapsingToolBarLayout上,而不是Toolbar。 --> <!-- 给需要有折叠效果的组件设置 layout_collapseMode属性 --> <!-- Toolbar 的高度layout_height必须固定,不能 “wrap_content”,否则Toolbar不会滑动,也没有折叠效果 --> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_scrollFlags="scroll|exitUntilCollapsed" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="48dp" > <!-- 制造视差效果 --> <!-- CollapsingToolbarLayout还能让我们做出更高级的动画,比如在里面放一个ImageView,然后在它折叠的时候渐渐淡出。同时在用户滚动的时候title的高度也会随着改变。 --> <!-- 为了制造出这种效果,我们添加一个定义了app:layout_collapseMode="parallax" 属性的ImageView。 --> <ImageView android:id="@+id/backdrop" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_collapseMode="parallax" app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" android:fitsSystemWindows="true" android:scaleType="centerCrop" android:src="@drawable/ic_launcher" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" app:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/ThemeOverlay.AppCompat.Dark" app:titleTextAppearance="@style/TextAppearance.AppCompat.Headline" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> <!-- FloatingActionButton继承自ImageView;backgroundTint背景颜色,默认的背景颜色是Theme主题中的; elevation阴影的深度 --> <android.support.design.widget.FloatingActionButton android:id="@+id/floatingActionButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="16dp" app:layout_anchor="@id/recyclerView" app:layout_anchorGravity="bottom|right|end" app:layout_behavior="com.mb.widget.ScrollAwareFABBehavior" android:src="@drawable/ic_launcher" app:backgroundTint="#CCCC00" app:elevation="16dp" app:fabSize="normal" /> <!-- 为了能让FloatingActionButton也能折叠且消失出现,我们必须给FAB设置锚点属性app:layout_anchor="@id/appbar" --> <android.support.design.widget.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_anchor="@id/appbar" app:layout_anchorGravity="bottom|right|end" android:src="@drawable/ic_launcher" app:backgroundTint="#CC00CC" app:fabSize="normal" /> </android.support.design.widget.CoordinatorLayout> <android.support.design.widget.NavigationView android:id="@+id/navigationView" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/drawer_header" app:menu="@menu/drawer"> </android.support.design.widget.NavigationView> </android.support.v4.widget.DrawerLayout>
import java.util.Arrays;import com.mb.widget.Cheeses;import com.mb.widget.SimpleStringRecyclerViewAdapter;import android.content.Context;import android.content.res.Configuration;import android.os.Bundle;import android.support.design.widget.CollapsingToolbarLayout;import android.support.design.widget.CoordinatorLayout;import android.support.design.widget.FloatingActionButton;import android.support.design.widget.NavigationView;import android.support.design.widget.NavigationView.OnNavigationItemSelectedListener;import android.support.design.widget.Snackbar;import android.support.v4.widget.DrawerLayout;import android.support.v7.app.ActionBarDrawerToggle;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.LinearLayoutManager;import android.support.v7.widget.RecyclerView;import android.support.v7.widget.Toolbar;import android.view.Menu;import android.view.MenuItem;import android.view.View;import android.widget.Toast;/** * http://www.open-open.com/lib/view/open1437312265428.html * @author pythoner * */public class MainActivity extends AppCompatActivity {private Context context;private ActionBarDrawerToggle drawerToggle;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);context=this;Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);//使用了ActionBarDrawerToggle之后,下面的设置可以不用// App Logo// toolbar.setLogo(R.drawable.ic_launcher); // Title// toolbar.setTitle("App Title"); // Sub Title// toolbar.setSubtitle("Sub title"); //Navigation Icon// toolbar.setNavigationIcon(R.drawable.ic_launcher); setSupportActionBar(toolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); final DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout); drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close); drawerToggle.syncState(); drawerLayout.setDrawerListener(drawerToggle); final NavigationView navigationView = (NavigationView) findViewById(R.id.navigationView); navigationView.setNavigationItemSelectedListener(new OnNavigationItemSelectedListener() {@Overridepublic boolean onNavigationItemSelected(MenuItem item) {// TODO Auto-generated method stubToast.makeText(context, item.getTitle(), Toast.LENGTH_SHORT).show();return false;}}); final CoordinatorLayout coordinatorLayout = (CoordinatorLayout) findViewById(R.id.coordinatorLayout); //通常,我们我们都是设置Toolbar的title,而现在,我们需要把title设置在CollapsingToolBarLayout上,而不是Toolbar。 CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar); collapsingToolbar.setTitle("Title"); FloatingActionButton floatingActionButton = (FloatingActionButton) findViewById(R.id.floatingActionButton); floatingActionButton.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {// TODO Auto-generated method stubfinal Snackbar snackbar = Snackbar.make(coordinatorLayout, "测试弹出提示", Snackbar.LENGTH_LONG);snackbar.show();snackbar.setAction("取消", new View.OnClickListener() {@Overridepublic void onClick(View v) {snackbar.dismiss();}});}}); RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView); recyclerView.setAdapter(new SimpleStringRecyclerViewAdapter(this,Arrays.asList(Cheeses.sCheeseStrings))); recyclerView.setLayoutManager(new LinearLayoutManager(this)); }@Overridepublic boolean onCreateOptionsMenu(Menu menu) {// Inflate the menu; this adds items to the action bar if it is present.getMenuInflater().inflate(R.menu.main, menu);return true;}@Overridepublic boolean onOptionsItemSelected(MenuItem item) {// Handle action bar item clicks here. The action bar will// automatically handle clicks on the Home/Up button, so long// as you specify a parent activity in AndroidManifest.xml.int id = item.getItemId();if (id == R.id.action_settings) {return true;}return super.onOptionsItemSelected(item);}/** 设备配置改变时 */ @Override public void onConfigurationChanged(Configuration newConfig) { super.onConfigurationChanged(newConfig); drawerToggle.onConfigurationChanged(newConfig); } }
去掉了style.xml中的一些设置
<resources> <!-- Base application theme, dependent on API level. This theme is replaced by AppBaseTheme from res/values-vXX/styles.xml on newer devices. --> <style name="AppBaseTheme" parent="android:Theme.Light"> <!-- Theme customizations available in newer API levels can go in res/values-vXX/styles.xml, while customizations related to backward-compatibility can go here. --> </style> <!-- Application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Theme.AppCompat.Light.NoActionBar --> <item name="windowActionBar">false</item> <item name="windowNoTitle">true</item> <!-- 导航栏底色 --> <item name="colorPrimary">@color/accent_material_dark</item> <!-- 状态栏底色--> <item name="colorPrimaryDark">@color/accent_material_light</item> <!-- 导航栏上的标题颜色 --> <!-- Activity窗口的颜色 --> <!-- 按钮选中或者点击获得焦点后的颜色 --> <!-- 和 colorAccent相反,正常状态下按钮的颜色 --> <!-- Button按钮正常状态颜色 --> <!-- EditText 输入框中字体的颜色 --> <!-- <item name="android:textColorPrimary">@android:color/black</item> <item name="android:windowBackground">@color/material_blue_grey_800</item> <item name="colorAccent">#00ff00</item> <item name="colorControlNormal">#ff0000</item> <item name="colorButtonNormal">@color/accent_material_light</item> <item name="editTextColor">@android:color/darker_gray</item> --> </style></resources>
背景模糊的Navigation Drawer。可以设置参数达到不同的模糊效果
https://github.com/charbgr/BlurNavigationDrawer
更多相关文章
- 基于ViewFlipper实现的自定义新手指引控件.
- Android自定义添加圆角渐变色按钮+点击效果
- 设置android的布局文件的背景颜色为黑色
- android 按钮效果的两种实现方法
- Android---63---Android中的动画效果
- android显示自定义view
- 分享Android仿刮奖效果控件
- Android自定义Toast之WindowManager
- Android 属性动画实现的扇形菜单效果