一、CardView
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="20dp"
app:cardCornerRadius="5dp"
app:cardBackgroundColor="@color/colorPaiGowYellow">
- 误区:设置背景颜色,没有圆角
android:background="@color/colorPaiGowYellow"
mCardView.setBackgroundColor="getResources().getColor(R.color.colorPaiGowYellow)";
- 解决:设置控件背景
app:cardBackgroundColor="@color/colorPaiGowYellow"
mCardView.setCardBackgroundColor(getResources().getColor(R.color.colorPaiGowYellow));
二、FloatingActionButton
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="@drawable/ic_comment"
app:layout_anchor="@id/appBar"
app:layout_anchorGravity="bottom|end"/>
<!--Fab大小设置-->
<dimen name="design_fab_size_normal" tools:ignore="PrivateResource">80dp</dimen>
<!--Fab中间Icon大小设置-->
<dimen name="design_fab_image_size" tools:override="true">60dp</dimen>
- 具有立体感,和普通按钮功能一样
三、CircleImageView
<de.hdodenhof.circleimageview.CircleImageView
android:src="@drawable/image11"
android:layout_centerInParent="true"
android:id="@+id/icon_image"
android:layout_width="70dp"
android:layout_height="70dp" />
- 圆形图片,常用于显示头像
四、DrawerLayout 、NavigationView
<android.support.v4.widget.DrawerLayout
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:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/img_frame_background"
tools:context="com.example.lenovo_g50_70.materialdesign.MainActivity">
<!--侧滑左布局-->
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:tag="START"
app:headerLayout="@layout/nav_header"
app:menu="@menu/nav_menu"/>
<!--侧滑右布局-->
<android.support.design.widget.NavigationView
android:id="@+id/nav_rightview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="end"
android:tag="END"
app:headerLayout="@layout/nav_header"
app:menu="@menu/nav_menu"/>
</android.support.v4.widget.DrawerLayout>
- 允许加入两个子控件,分别是侧滑菜单和主布局
- NavigationView:常用于侧滑菜单的根布局
- 提供更好的侧滑菜单展示效果(nineoldandroids-2.4.0.jar)
drawerLayout.setDrawerListener(new DrawerLayout.DrawerListener() {
@Override
public void onDrawerSlide(View drawerView, float slideOffset) {//监听菜单滑动时的动画效果
View mContent = drawerLayout.getChildAt(0);
View mMenu = drawerView;
float scale = 1 - slideOffset;
float rightScale = 0.8f + scale * 0.2f;
//Tag,用于给相关联的view添加额外的信息
if (drawerView.getTag().equals("START"))
{ //左侧滑栏
float leftScale = 1 - 0.3f * scale;
ViewHelper.setScaleX(mMenu, leftScale);
ViewHelper.setScaleY(mMenu, leftScale);
ViewHelper.setAlpha(mMenu, 0.6f + 0.4f * (1 - scale));
ViewHelper.setTranslationX(mContent, mMenu.getMeasuredWidth() * (1 - scale));
ViewHelper.setPivotX(mContent, 0);
ViewHelper.setPivotY(mContent, mContent.getMeasuredHeight() / 2);
mContent.invalidate();
ViewHelper.setScaleX(mContent, rightScale);
ViewHelper.setScaleY(mContent, rightScale);
} else { //右侧滑栏
ViewHelper.setTranslationX(mContent, -mMenu.getMeasuredWidth() * slideOffset);
ViewHelper.setPivotX(mContent, mContent.getMeasuredWidth());
ViewHelper.setPivotY(mContent, mContent.getMeasuredHeight() / 2);
mContent.invalidate();
ViewHelper.setScaleX(mContent, rightScale);
ViewHelper.setScaleY(mContent, rightScale);
}
}
五、SwipeRefreshLayout
<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/swipe_refresh"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
</android.support.v4.widget.SwipeRefreshLayout>
- 下拉刷新,常作为View的根布局,刷新子View的内容
- 第三方依赖,支持下拉刷新和上拉加载
<com.liaoinstan.springview.widget.SpringView
android:id="@+id/spring_news"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_news"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</com.liaoinstan.springview.widget.SpringView>
六、CoordinatorLayout 、AppBarLayout 、NestedScrollView 、CollapsingToolbarLayout、Toolbar
CoordinatorLayout是增强版FrameLayout,AppBarLayout是增强版LinearLayout,NestedScrollView是增强版ScrollView,Toolbar是增强版ActionBar,CollapsingToolbarLayout是一个支持折叠并且带有优美的动画渐变效果的Layout 。
Toolbar一般作为CollapsingToolbarLayout的直接子布局,CollapsingToolbarLayout一般作为AppBarLayout的直接子布局,AppBarLayout一般作为CoordinatorLayout的直接子布局
CoordinatorLayout的子布局实现属性app:layout_behavior="@string/appbar_scrolling_view_behavior",将滑动事件通知AppBarLayout,使AppBarLayout作出相应的动作。
AppBarLayout的子布局实现属性app:layout_scrollFlags,其中scroll表示AppBarLayout的ChildView 跟随滑动事件滑进或滑出屏幕 , 滑动的前提是当前的ChildView 前的ChildView也设置了scroll 属性,enterAlways 表示快速返回模式,则ChildView的滑动优先级大于AppBarLayout外的View,enterAlwaysCollapsed作为enterAlways的附加属性,需要结合android:minHeight和enterAlways 一起使用,表示 ChildView先滑动minHeight的距离,然后让AppBarLayout外的View完成滑动,再滑动ChildView剩下的距离,exitUntilCollapsed 设置了该属性的ChildView滑出屏幕后,如果其后面的ChildView没设置该属性,则不能滑出屏幕,snap是ChildView滑动的一个吸附效果,不会存在局部滑动的情况,在屏幕中整个显示或者整个隐藏 。
CollapsingToolbarLayout的子布局实现属性app:layout_collapseMode,其中off是默认属性,表示没有折叠的行为,pin表示CollapsingToolbarLayout折叠后,设置该属性的ChildView将固定在顶部,parallax表示CollapsingToolbarLayout折叠时,此布局会有视差折叠效果,CollapsingToolbarLayout自己实现属性app:contentScrim="?attr/colorPrimary",表示趋于折叠状态以及折叠后的背景颜色 。
<!--主布局-->
<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:id="@+id/activity_girl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.example.lenovo_g50_70.materialdesign.GirlActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="530dp">
<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="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/girl_image_view"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="@+id/ToolBar"
app:layout_collapseMode="pin"/>
</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">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="4dp">
<TextView
android:id="@+id/girl_content_text"
android:layout_margin="10dp"
android:textSize="20sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
七、Snackbar
可与用户实现交互,可比作增强版的Toast
Snackbar.make(v,"Data delete",Snackbar.LENGTH_INDEFINITE)
.setAction("Undo", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"Data restored",Toast.LENGTH_SHORT).show();
}
}).show();
八、TextInputLayout
包裹EditText,展示更丰富的提示效果
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginBottom="8dp"
android:background="@android:color/white"
android:textColorHint="@color/colorPrimary"
app:counterEnabled="true"
app:counterMaxLength="19"
app:counterOverflowTextAppearance="@color/colorPrimary"
app:hintTextAppearance="@color/colorPrimary">
<EditText
android:imeOptions="actionNext"
android:id="@+id/log_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="5dp"
android:background="@null"
android:hint="用户名"/>
</android.support.design.widget.TextInputLayout>
九、BottomNavigationView
<android.support.design.widget.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="?android:attr/windowBackground"
app:itemBackground="@null" -> 取消导航栏的点击效果
app:itemIconTint="@color/colorPrimary"
app:itemTextColor="@color/colorPrimary"
app:menu="@menu/navigation" />
底部Item菜单
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:icon="@mipmap/ic_launcher"
android:title="首页" />
<item
android:icon="@mipmap/ic_launcher"
android:title="收藏" />
<item
android:icon="@mipmap/ic_launcher"
android:title="我的" />
</menu>
当菜单数目大于三时,会有位移动画,可以通过反射取消该动画
@SuppressLint("RestrictedApi")
public static void disableShiftMode(BottomNavigationView view) {
BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
try {
Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
shiftingMode.setAccessible(true);
shiftingMode.setBoolean(menuView, false);
shiftingMode.setAccessible(false);
for (int i = 0; i < menuView.getChildCount(); i++) {
BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
item.setShiftingMode(false);
item.setChecked(item.getItemData().isChecked());
}
} catch (Exception e) {
}
}
取消导航栏的每项点击文字和图片放大的效果
<dimen name="design_bottom_navigation_active_text_size">10dp</dimen>
<dimen name="design_bottom_navigation_text_size">10dp</dimen>
十、启动页优化
public class SplashActivity extends AppCompatActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Intent intent = new Intent(this, MainActivity.class);
startActivity(intent);
finish();
}
}
<activity
android:name=".ui.activity.SplashActivity"
android:theme="@style/SplashTheme">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowBackground">@drawable/splash_layer</item>
</style>
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@color/colorPrimary"/>
<item>
<bitmap
android:gravity="center"
android:src="@mipmap/ic_launcher"/>
</item>
</layer-list>
十一、相关依赖
- compile 'com.android.support:design:25.0.1'
- compile 'de.hdodenhof:circleimageview:2.1.0'
- compile 'com.android.support:cardview-v7:25.0.1'
- compile 'com.liaoinstan.springview:library:1.2.6'
网友评论