ActinBar+DrawerLayout+viewpager+PagerTabStrip的使用

来源:互联网 发布:gui config.json下载 编辑:程序博客网 时间:2024/06/05 14:21

ActionBar 是 Android 3.0(API level 11) 引入的一个新控件,它代表了应用程序标题栏,ActionBar好处是应用可以根据设备显示空间动态调整你想要添加的图片文字或控件等,这里只是使用它的搜索功能。而侧边栏是Android应用中常见的界面效果,可随主屏在左侧或右侧联动,drawerLayout是android.support.v4.widget.DrawerLayout包中,它实现了侧滑菜单效果的控件,使用DrawerLayout可以轻松的实现抽屉效果。而滑动不同的标签切换不同的界面也是常用的,使用ViewPager自带PagerTabStrip(可滑动)与PagerTitleStrip(不可滑动)也可以轻松的实现。

效果图:
这里写图片描述
布局文件:

<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/drawer"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#DDDDDD">    <!--主内容界面 PagerTabStrip必须是ViewPager子view-->    <android.support.v4.view.ViewPager        android:layout_width="match_parent"        android:layout_height="match_parent"        android:id="@+id/vp_tab"        >        <!--ActinBar下的标签-->        <android.support.v4.view.PagerTabStrip            android:id="@+id/pager_tab_strip"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_gravity="top"            android:background="#ffffff"            android:textColor="#000"            android:paddingTop="4dp"            android:paddingBottom="4dp" />    </android.support.v4.view.ViewPager>    <!--侧滑菜单内容-->    <FrameLayout        android:id="@+id/left_layout"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_gravity="start"        android:background="@android:color/darker_gray"        /></android.support.v4.widget.DrawerLayout>

activity:

public class MainActivity extends AppCompatActivity  implements SearchView.OnQueryTextListener {    private DrawerLayout mDrawerLayout;    private ActionBarDrawerToggle mDrawerToggle;    private ViewPager vp_tab;    private PagerTabStrip pagerTabStrip;    private String[] tabTitle;    private FrameLayout left_layout;    final private int REQUEST_CODE_ASK_PERMISSIONS = 123;    @Override    protected void onCreate(Bundle savedInstanceState) {        initView();        initActionBar();        initData();    }    protected void initView() {        setContentView(R.layout.activity_main);        vp_tab = (ViewPager) findViewById(R.id.vp_tab);        left_layout = (FrameLayout) findViewById(R.id.left_layout);        pagerTabStrip = (PagerTabStrip) findViewById(R.id.pager_tab_strip);        //设置tab下划线颜色 pagerTabStrip.setTabIndicatorColor(getResources().getColor(R.color.indicatorColor));    }    @Override    protected void initActionBar() {        getSupportActionBar().setDisplayHomeAsUpEnabled(true);                                                                                                                                                            mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer);        //抽屉切换器与android.R.id.home(ActionBar返回图标)动作条 绑定交互        //改变android.R.id.home返回图标。        //监听Drawer拉出、隐藏;        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.string.drawer_open,                R.string.drawer_close);        //同步更新Drawer拉出、隐藏,带有android.R.id.home动画效果。        mDrawerToggle.syncState();        // 给抽屉Layout绑定切换器监听        mDrawerLayout.addDrawerListener(mDrawerToggle);    }    protected void initData() {        //获取values/string.xml的字符数组        tabTitle = getResource().getStringArray(R.array.tab_names);        //填充Viewpager适配器        vp_tab.setAdapter(new MyAdapter(getSupportFragmentManager()));    }    public class MyAdapter extends FragmentPagerAdapter{        public MyAdapter(FragmentManager fm) {            super(fm);        }        @Override        public Fragment getItem(int position) {            return new HomeFragmet1();        }        @Override        public int getCount() {            return tabTitle.length;        }        //返回标签的文本        @Override        public CharSequence getPageTitle(int position) {            return tabTitle[position];        }    }    //添加右上角搜索功能    @Override    public boolean onCreateOptionsMenu(Menu menu) {        //main搜索功能布局        getMenuInflater().inflate(R.menu.main, menu);        //SearchView用于监听ActinBar搜索框文本内容        SearchView searchView = (SearchView) menu.findItem(R.id.ab_search).getActionView();        searchView.setOnQueryTextListener(this);        return super.onCreateOptionsMenu(menu);    }    //重写此方法,点击左上角三横杠才能跳出DrawerLayout    @Override    public boolean onOptionsItemSelected(MenuItem item) {        return mDrawerToggle.onOptionsItemSelected(item) || super.onOptionsItemSelected(item);    }    //搜索提交时调用    @Override    public boolean onQueryTextSubmit(String query) {        Toast.makeText(this, query, Toast.LENGTH_SHORT).show();        return true;    }    //搜索文本时调用    @Override    public boolean onQueryTextChange(String newText) {      Toast.makeText(this, newText, Toast.LENGTH_SHORT).show();        return true;    }}

实现actionBar的搜索功能要在res/下新建menu文件夹
这里写图片描述
main.xml

<menu 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"    tools:context=".MainActivity" >    <item        android:id="@+id/ab_search"        android:orderInCategory="80"        android:title="action_search"        app:actionViewClass="android.support.v7.widget.SearchView"        app:showAsAction="ifRoom"/></menu>
0 0
原创粉丝点击