Android程序开发之使用Design包实现QQ动画侧滑效果和滑动菜单导航

概述Google在2015的IO大会上，给我们带来了更加详细的MaterialDesign设计规范，同时，也给我们带来了全新的AndroidDesignSupportLibrary，在这个support库里面，Google给我们提供了更加规范的MD设计风格的控件。最重要的

Google在2015的IO大会上，给我们带来了更加详细的Material Design设计规范，同时，也给我们带来了全新的AndroID Design Support library，在这个support库里面，Google给我们提供了更加规范的MD设计风格的控件。最重要的是，AndroID Design Support library的兼容性更广，直接可以向下兼容到AndroID 2.2。这不得不说是一个良心之作。

使用方法很简单，只需要添加一句依赖

compile 'com.androID.support:design:24.0.0'

先用TabLayout和Snackbar以及Navigation实现QQ侧滑动画效果和滑动

项目已经同步至：https://github.com/nanchen2251/designNavigation-and-tabLayout

上个整体效果图

首先带来的是TabLayout

Tab滑动切换VIEw并不是一个新的概念，但是Google却是第一次在support库中提供了完整的支持，
而且，Design library的TabLayout 既实现了固定的选项卡 - vIEw的宽度平均分配，
也实现了可滚动的选项卡 - vIEw宽度不固定同时可以横向滚动。选项卡可以在程序中动态添加,
但大部分时间我们都不会这样用，通常滑动布局都会和VIEwPager配合起来使用，所以，我们需要VIEwPager来帮忙：
通过一句话setupWithVIEwPager，我们就把VIEwPager和TabLayout结合了起来。

上个运行图：

看代码

首先是主页面的XML文件

<?xml version="1.0" enCoding="utf-8"?><linearLayoutxmlns: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:layout_wIDth="match_parent"androID:layout_height="match_parent"androID:orIEntation="vertical"tools:context="com.example.nanchen.designtablayoutdemo.MainActivity"><androID.support.design.Widget.TabLayoutandroID:layout_wIDth="match_parent"app:tabBackground="@color/colorPrimaryDark"app:tabTextcolor="@androID:color/white"app:tabSelectedTextcolor="#04b4ae"androID:layout_height="wrap_content"androID:ID="@+ID/main_tab_layout"/><androID.support.v4.vIEw.VIEwPagerandroID:layout_wIDth="match_parent"androID:layout_height="0dp"androID:layout_weight="1"androID:ID="@+ID/main_vp"/></linearLayout>

　　其中由于必须TabLayout控件是Design包下的，所以必须加上

xmlns:app="http://schemas.androID.com/apk/res-auto"<br><br>这样才可以使用自定义它的属性。它的属性有很多，这样简单使用几个，更多的大家可以去尝试。<br>这里，我只滚动了三个，若是你的APP tab标签多的话，

app:tabMode="scrollable" 必须指定这个属性，不然你会发现看不到，如果标签数少，还是建议设置为固定的，那样才会等分。

<br><br>其次是Fragment的XML文件<br><br><FrameLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"xmlns:tools="http://schemas.androID.com/tools"androID:layout_wIDth="match_parent"androID:layout_height="match_parent"tools:context="com.example.nanchen.designtablayoutdemo.BlankFragment"><!-- Todo: Update blank fragment layout --><TextVIEwandroID:layout_wIDth="match_parent"androID:layout_height="match_parent"androID:textSize="30sp"androID:gravity="center"androID:ID="@+ID/fg_text"androID:text="@string/hello_blank_fragment"/></FrameLayout>

MainActivity.java

package com.example.nanchen.designtablayoutdemo;import androID.os.Bundle;import androID.support.design.Widget.TabLayout;import androID.support.v4.vIEw.VIEwPager;import androID.support.v7.app.AppCompatActivity;import java.util.ArrayList;import java.util.List;public class MainActivity extends AppCompatActivity {@OverrIDeprotected voID onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentVIEw(R.layout.activity_main);VIEwPager vp = (VIEwPager) findVIEwByID(R.ID.main_vp);TabLayout tabLayout = (TabLayout) findVIEwByID(R.ID.main_tab_layout);List<String> List = new ArrayList<>();for (int i = 1; i < 4; i++) {// List.add(String.format(Locale.CHINA,"第02d%页",i));List.add("第"+i+"页");}vp.setAdapter(new MyAdapter(getSupportFragmentManager(),List));tabLayout.setupWithVIEwPager(vp);}}

　　FragmenT用于存放下面的数据

package com.example.nanchen.designtablayoutdemo;import androID.os.Bundle;import androID.support.annotation.Nullable;import androID.support.v4.app.Fragment;import androID.vIEw.LayoutInflater;import androID.vIEw.VIEw;import androID.vIEw.VIEwGroup;import androID.Widget.TextVIEw;/*** A simple {@link Fragment} subclass.*/public class BlankFragment extends Fragment {public BlankFragment() {// required empty public constructor}public static BlankFragment newInstance(String text) {Bundle args = new Bundle();args.putString("text",text);BlankFragment fragment = new BlankFragment();fragment.setArguments(args);return fragment;}@OverrIDepublic VIEw onCreateVIEw(LayoutInflater inflater,VIEwGroup container,Bundle savedInstanceState) {// Inflate the layout for this fragmentreturn inflater.inflate(R.layout.fragment_blank,container,false);}@OverrIDepublic voID onVIEwCreated(VIEw vIEw,@Nullable Bundle savedInstanceState) {super.onVIEwCreated(vIEw,savedInstanceState);TextVIEw text = (TextVIEw) vIEw.findVIEwByID(R.ID.fg_text);String str = getArguments().getString("text");text.setText(str);}}

需要一个PagerAdapter

自定义一个。

package com.example.nanchen.designtablayoutdemo;import androID.support.v4.app.Fragment;import androID.support.v4.app.FragmentManager;import androID.support.v4.app.FragmentPagerAdapter;import java.util.List;/*** Created by 南尘 on 2016/7/12.*/public class MyAdapter extends FragmentPagerAdapter {private List<String> List;public MyAdapter(FragmentManager fm,List<String> List) {super(fm);this.List = List;}@OverrIDepublic Fragment getItem(int position) {return BlankFragment.newInstance(List.get(position));}@OverrIDepublic int getCount() {return List.size();}@OverrIDepublic CharSequence getPageTitle(int position) {return List.get(position);}} 

2）再来看看如何使用Navigation和DrawerLayout实现侧滑功能的动画演示

前面讲解了Design包下的TabLayout的使用，下面将带来NavagationVIEw和DrawLayout以及toolbar的联动。

NavigationVIEw 通过提供抽屉导航所需的框架让实现更简单，同时它还能够直接通过菜单资源文件直接生成导航元素。把NavigationVIEw作为DrawerLayout的内容视图来使用。NavigationVIEw处理好了和状态栏的关系，可以确保NavigationVIEw在API21+设备上正确的和状态栏交互。

以下代码在前面代码的基础上修改。

MainActivity.java

package com.example.nanchen.designtablayoutdemo;import androID.os.Bundle;import androID.support.design.Widget.NavigationVIEw;import androID.support.design.Widget.TabLayout;import androID.support.v4.vIEw.GravityCompat;import androID.support.v4.vIEw.VIEwPager;import androID.support.v4.Widget.DrawerLayout;import androID.support.v7.app.ActionbarDrawerToggle;import androID.support.v7.app.AppCompatActivity;import androID.support.v7.Widget.Toolbar;import androID.vIEw.MenuItem;import androID.Widget.Toast;import java.util.ArrayList;import java.util.List;public class MainActivity extends AppCompatActivity implements NavigationVIEw.OnNavigationItemSelectedListener {private DrawerLayout drawerLayout;@OverrIDeprotected voID onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentVIEw(R.layout.activity_main);VIEwPager vp = (VIEwPager) findVIEwByID(R.ID.main_vp);TabLayout tabLayout = (TabLayout) findVIEwByID(R.ID.main_tab_layout);Toolbar toolbar = (Toolbar) findVIEwByID(R.ID.main_toolbar);drawerLayout = (DrawerLayout) findVIEwByID(R.ID.main_drawerlayout);//设置Toolbar和DrawerLayout实现动画和联动this.setSupportActionbar(toolbar);ActionbarDrawerToggle toggle = new ActionbarDrawerToggle(this,drawerLayout,toolbar,0);drawerLayout.addDrawerListener(toggle);//设置监听toggle.syncState();//加上同步getSupportActionbar().setDefaultdisplayHomeAsUpEnabled(true);List<String> List = new ArrayList<>();for (int i = 1; i < 5; i++) {// List.add(String.format(Locale.CHINA,List));tabLayout.setupWithVIEwPager(vp);NavigationVIEw navigationVIEw = (NavigationVIEw) findVIEwByID(R.ID.main_navigation);navigationVIEw.setNavigationItemSelectedListener(this);}@OverrIDepublic boolean onNavigationItemSelected(MenuItem item) {switch (item.getItemID()) {case R.ID.menu_item1:Toast.makeText(this,"你点击了菜单1",Toast.LENGTH_SHORT).show();break;case R.ID.menu_item2:Toast.makeText(this,"你点击了菜单2",Toast.LENGTH_SHORT).show();break;case R.ID.menu_item3:Toast.makeText(this,"你点击了菜单3",Toast.LENGTH_SHORT).show();break;case R.ID.menu_item4:Toast.makeText(this,"你点击了菜单4",Toast.LENGTH_SHORT).show();break;}drawerLayout.closeDrawer(GravityCompat.START);return true;}}

主布局

<?xml version="1.0" enCoding="utf-8"?><linearLayoutxmlns: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:layout_wIDth="match_parent"androID:layout_height="match_parent"androID:orIEntation="vertical"tools:context="com.example.nanchen.designtablayoutdemo.MainActivity"><!--Toolbar，Actionbar的替代品--><androID.support.v7.Widget.ToolbarandroID:ID="@+ID/main_toolbar"app:theme="@style/themeOverlay.AppCompat.Dark.Actionbar"androID:background="@color/colorPrimary"androID:layout_wIDth="match_parent"androID:layout_height="?actionbarSize"/><androID.support.v4.Widget.DrawerLayoutandroID:layout_wIDth="match_parent"androID:layout_height="0dp"androID:ID="@+ID/main_drawerlayout"androID:layout_weight="1"><linearLayoutandroID:orIEntation="vertical"androID:layout_wIDth="match_parent"androID:layout_height="match_parent"><androID.support.design.Widget.TabLayoutandroID:layout_wIDth="match_parent"app:tabBackground="@color/colorPrimaryDark"app:tabTextcolor="@androID:color/white"app:tabSelectedTextcolor="#04b4ae"androID:layout_height="wrap_content"androID:ID="@+ID/main_tab_layout"/><androID.support.v4.vIEw.VIEwPagerandroID:layout_wIDth="match_parent"androID:layout_height="0dp"androID:layout_weight="1"androID:ID="@+ID/main_vp"/></linearLayout><androID.support.design.Widget.NavigationVIEwapp:menu="@menu/navigation"androID:ID="@+ID/main_navigation"androID:layout_gravity="start"app:headerLayout="@layout/header"app:itemIconTint="@color/navigation_selector"app:itemTextcolor="@color/navigation_selector"androID:layout_wIDth="match_parent"androID:layout_height="match_parent"></androID.support.design.Widget.NavigationVIEw></androID.support.v4.Widget.DrawerLayout></linearLayout> 

　navigation.xml

<?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/single_1" androID:title="单选1" androID:icon="@mipmap/ic_launcher"/><item androID:ID="@+ID/single_2" androID:title="单选2" androID:icon="@mipmap/ic_launcher"/><item androID:ID="@+ID/single_3" androID:title="单选3" androID:icon="@mipmap/ic_launcher"/></group><item androID:ID="@+ID/menu_item1" androID:title="菜单1" androID:icon="@mipmap/ic_launcher"/><item androID:ID="@+ID/menu_item2" androID:title="菜单2" androID:icon="@mipmap/ic_launcher"/><item androID:ID="@+ID/menu_item3" androID:title="菜单3" androID:icon="@mipmap/ic_launcher"/><item androID:ID="@+ID/menu_item4" androID:title="菜单4" androID:icon="@mipmap/ic_launcher"/></menu> 　

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:orIEntation="vertical"androID:gravity="center"androID:background="@drawable/header_bg"androID:layout_height="200dp"><ImageVIEwandroID:layout_wIDth="wrap_content"androID:layout_height="wrap_content"androID:src="@mipmap/ic_launcher"/><TextVIEwandroID:layout_wIDth="wrap_content"androID:layout_height="wrap_content"androID:text="文本"/></linearLayout>

header.bg.xml

<?xml version="1.0" enCoding="utf-8"?><shape xmlns:androID="http://schemas.androID.com/apk/res/androID"><gradIEnt androID:type="linear" androID:angle="45"androID:startcolor="#143e52" androID:endcolor="#06a0ff"/></shape>

navigation_selector.xml

<?xml version="1.0" enCoding="utf-8"?><selector xmlns:androID="http://schemas.androID.com/apk/res/androID"><item androID:color="#fa08ca" androID:state_checked="true"/><item androID:color="#6b6a6a" androID:state_checked="false"/></selector> 

以上所述是小编给大家介绍的AndroID程序开发之使用Design包实现QQ动画侧滑效果和滑动菜单导航，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程小技巧网站的支持！

总结

以上是内存溢出为你收集整理的Android程序开发之使用Design包实现QQ动画侧滑效果和滑动菜单导航全部内容，希望文章能够帮你解决Android程序开发之使用Design包实现QQ动画侧滑效果和滑动菜单导航所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。