ActinBar+DrawerLayout+viewpager+PagerTabStrip的使用

本文介绍如何在Android应用中整合ActionBar、DrawerLayout及ViewPager组件来实现动态调整的标题栏、侧滑菜单及标签切换功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值