Android Design Support Library 库·的简介:
它是Google 为 Android 5.0 以上 添加的一些新特性,使得Android app 开发的界面可以焕然一新!
Design Support Library | 控件介绍 |
---|---|
SnackBar | 一种基于Toast 与Dialog 中间用于提示消息的 |
TextInputLayout | 一种新的EditText(提示消息不会消失) |
FloatingActionButton | 悬浮按钮 |
TabLayout | 分页式布局,结合Fragment一起使用 |
NavigationView | 类似于侧滑菜单的导航View |
AppBarLayout | 新形式的AppBar |
CoordinatorLayout | 控件之间相互作用的布局 |
CollapsingToolBarLayout | 一种可以收缩顶部ToolBar 的FrameLayout |
Design Support Library 在 Android Studio 中可以依赖:
compile ‘com.android.support:design:24.2.1’;
(Android Studio 中依赖方法:在Android Studio 中切换到Project 视图 然后点击打开 app 包下build.gradle 文件中)
下面通过代码加实现效果图逐一为大家展现效果:
SnackBar :
Snackbar.make(v,"SnackBar comes out",Snackbar.LENGTH_LONG)
.setAction("Action", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"Toast comes out",Toast
.LENGTH_SHORT).show();
}
}).show();
TextInputLayout:
xml 代码:就是在TextInputLayout内部添加一个 EditText
<android.support.design.widget.TextInputLayout
android:id="@+id/textInputLayout_name"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.TextInputLayout>
java 实现代码
textInputLayoutName = (TextInputLayout)findViewById(R.id.textInputLayout_name);
EditText editText_name=textInputLayoutName.getEditText();
textInputLayoutName.setHint("请输入你的名字"); //给EditText设置要显示的提示消息
//接下来给 EditText 添加点击事件
editText_name.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
if(s.length()>4){
textInputLayoutName.setError("你的名字输入错误");
textInputLayoutName.setErrorEnabled(true);
}else{
textInputLayoutName.setErrorEnabled(false);
}
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
}
@Override
public void afterTextChanged(Editable s) {
}
});
FloatingActionButton:悬浮按钮
xml 代码
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_marginTop="360dp"
android:layout_marginLeft="240dp"
app:elevation="6dp"
app:pressedTranslationZ="12dp"
android:src="@mipmap/ic_launcher"/>
java 实现代码
private FloatingActionButton fab;
fab = (FloatingActionButton) findViewById(R.id.fab);
//给FloatingActionButton 添加背景图片 fab.setBackgroundTintList(ColorStateList.valueOf(Color.argb(255,125,23,56)));
//给FloatingActionButton 添加点击事件,事件效果是弹出一个SnackBar
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar.make(v,"Here is a SnackBar",Snackbar.LENGTH_SHORT) //给SnackBar 添加点击事件,事件效果是弹出Toast提示信息
.setAction("Action", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(FloatingActionActivity.this,"Hello World",Toast.LENGTH_SHORT).show();
}
})
.show();
}
});
TabLayout :分页式布局,一般结合ViewPager一起使用
xml 代码: 将TabLayout 与 ViewPager 都放在 RelativeLayout 布局中
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/activity_tab_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.cx.designlibrarydemo.TabLayoutActivity">
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
app:tabTextColor="#C60"
app:tabSelectedTextColor="#fff"
app:tabMode="fixed"
app:tabGravity="fill">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:paddingTop="45dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/tabLayout">
</android.support.v4.view.ViewPager>
</RelativeLayout>/>
Java实现代码
private ViewPager viewPager;
private TabLayout tabLayout;
private List<Fragment> fragments;
viewPager = (ViewPager) findViewById(R.id.viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabLayout);
//将Fragment 用一个 List<Fragment>集合来装
fragments=new ArrayList<>();
fragments.add(new TabFragment_1());
fragments.add(new TabFragment_2());
fragments.add(new TabFragment_3());
//ViewPager设置 Adapter用来适配Fragment(因为ViewPager中装入3个Fragment,我们有3个Tab页,每个Tab页一一对应Fragment)
final FragmentPagerAdapter adapter=new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public android.support.v4.app.Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return fragments.size();
}
};
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager); //将ViewPager 与TabLayout 关联
//设置3个 Tab页,并且给每个Tab页设上标题 ,你也可以自定义标题,比如加入图片之类的
tabLayout.getTabAt(0).setText("Tab1");
tabLayout.getTabAt(1).setText("Tab2");
tabLayout.getTabAt(2).setText("Tab3");
其中的Fragment的代码,这里只列举一个
public class TabFragment_1 extends android.support.v4.app.Fragment{
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View viewTabFragment1=inflater.inflate(R.layout.fragment_tab1,container,false);
return viewTabFragment1;
}
}
NavigationView :类似与SlidingMenu(侧滑菜单那种显示效果—第三方控件)
这里结合着DrawerLayout (抽屉控件一起使用)
xml代码:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<!--这是主内容布局-->
<include layout="@layout/content_layout"/>
<!--这是侧滑菜单的布局-->
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:layout_gravity="left"
app:headerLayout="@layout/nav_header"
app:menu="@menu/draw_menu"
>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
重点注意这两句代码:
app:headerLayout=”@layout/nav_header”
app:menu=”@menu/draw_menu”
nav_header.xml 里面存放着NavigationView 的头部,它是layout形式的xml文件
draw_menu.xml 里面存放则NavigationView 的菜单,它是menu形式的xml文件
nav_header.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="162dp"
android:background="?attr/colorPrimaryDark"
android:paddingTop="30dp"
android:paddingLeft="16dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark"
android:orientation="vertical"
android:gravity="center|left"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="@mipmap/ic_launcher"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="cxYu1997"/>
</LinearLayout>
draw_menu.xml 代码:这是menu 菜单文件,在menu文件夹新建的menu文件
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item android:id="@+id/nav_home"
android:icon="@mipmap/ic_launcher"
android:title="Home"/>
<item android:id="@+id/nav_messages"
android:icon="@mipmap/ic_launcher"
android:title="Messages"/>
<item android:id="@+id/nav_friends"
android:icon="@mipmap/ic_launcher"
android:title="Friends"/>
<item android:id="@+id/nav_discussion"
android:icon="@mipmap/ic_launcher"
android:title="Discussion"/>
</group>
<item android:title="Sub items">
<menu>
<item android:icon="@mipmap/ic_launcher"
android:title="Sub item1"/>
<item android:icon="@mipmap/ic_launcher"
android:title="Sub item2"/>
</menu>
</item>
</menu>
Java实现代码:
public class NavigationViewActivity extends AppCompatActivity {
//下面完善了
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_navigation_view);
}
}
下面是对NavigationView 中的Menu菜单文件添加点击事件
private NavigationView navigationView;
navigationView =(NavigationView)findViewById(R.id.navigationView);
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()){
case R.id.nav_home:
Toast.makeText(NavigationViewActivity.this,"Nav_Home 界面",Toast.LENGTH_SHORT).show();
break;
case R.id.nav_messages:
Toast.makeText(NavigationViewActivity.this,"Nav_Messages 界面",Toast.LENGTH_SHORT).show();
break;
case R.id.nav_friends:
Toast.makeText(NavigationViewActivity.this,"Nav_Friends 界面",Toast.LENGTH_SHORT).show();
break;
case R.id.nav_discussion:
Toast.makeText(NavigationViewActivity.this,"Nav_Discussion 界面",Toast.LENGTH_SHORT).show();
break;
case R.id.sub_item1:
Toast.makeText(NavigationViewActivity.this,"sub_item1 界面",Toast.LENGTH_SHORT).show();
break;
case R.id.sub_item2:
Toast.makeText(NavigationViewActivity.this,"sub_item2 界面",Toast.LENGTH_SHORT).show();
break;
}
item.setChecked(true);
drawerLayout.closeDrawers(); //关闭抽屉
return true;
}
});
//创建菜单
@Override
public boolean onCreateOptionsMenu(Menu menu) {
//创建Menu 菜单
getMenuInflater().inflate(R.menu.draw_menu,menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id=item.getItemId();
if (id == R.id.action_settings) {
return true;
}
if (id == android.R.id.home) {
drawerLayout.openDrawer(GravityCompat.START); //打开抽屉
return true;
}
return super.onOptionsItemSelected(item);
}
由于是抽屉所以要在 Toolbar 上添加一个抽屉按钮,用来更加方便的打开左侧的NavigationView 视图,所以这里初始化Toolbar 一下;
private void initToolbar() {
//初始化ToolBar
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
toolbar.setTitle("ToolBar的菜单栏"); //设置标题
toolbar.setSubtitle("CSDN"); //设置子标题
toolbar.setLogo(R.mipmap.ic_launcher); //设置Logo图标
toolbar.setNavigationIcon(R.mipmap.ic_launcher); //设置抽屉的图片
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
toolbar.setOnMenuItemClickListener(this);//这是给toolbar 上的其他Menu设置按钮监听事件,并不是NavigationView 的Menu上的点击事件,还请不要搞混
}
//这是Toolbar 上的menu菜单点击事件,跟NavigationView上的Menu的菜单点击事件展现效果不一样,虽然共用一份Menu文件
@Override
public boolean onMenuItemClick(MenuItem item) {
//对ToolBar上的菜单进行点击事件
switch (item.getItemId()){
case R.id.nav_home:
Toast.makeText(NavigationViewActivity.this,"Nav_Home 界面",Toast.LENGTH_SHORT).show();
break;
case R.id.nav_messages:
Toast.makeText(NavigationViewActivity.this,"Nav_Messages 界面",Toast.LENGTH_SHORT).show();
break;
case R.id.nav_friends:
Toast.makeText(NavigationViewActivity.this,"Nav_Friends 界面",Toast.LENGTH_SHORT).show();
break;
case R.id.nav_discussion:
Toast.makeText(NavigationViewActivity.this,"Nav_Discussion 界面",Toast.LENGTH_SHORT).show();
break;
}
return true;
}
注意: 该代码中的getMenuInflater().inflate(R.menu.draw_menu,menu);
上面的R.menu.draw_menu 文件为NavigationView 和 Toolbar 两者共用的Menu菜单文件,读者可以自定义两份,没必要共用一份Menu文件!
后面的AppBarLayout和 CoordinatorLayout以及CollapsingToolBarLayout 3大控件在下一篇博客中详细介绍!(由于篇幅问题)