使用XTablayout实现横向滑动菜单,可以设置文字下面导航栏的宽度

实现效果:tablayout个数为2,并且可以设置导航栏的宽度(tablayout没有这个属性,这里使用XTablayout)

导入依赖:

  compile 'com.androidkun:XTabLayout:1.1.3'
布局中:

 <com.androidkun.xtablayout.XTabLayout
        android:id="@+id/xTablayout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:xTabMode="scrollable"
        app:xTabIndicatorColor="#03A9F4"
        app:xTabIndicatorHeight="5dp"
        app:xTabIndicatorWidth="100dp"
        app:xTabSelectedTextColor="#03A9F4"
        app:xTabTextColor="#555555"
        app:xTabTextSize="21sp"
        app:xTabMinWidth="240dp"
        app:xTabMaxWidth="480dp"
        />
属性对应的意思:

导航栏的颜色

app:xTabIndicatorColor="#03A9F4"
导航栏的高度:

 app:xTabIndicatorHeight="5dp"
导航栏的宽度:
app:xTabIndicatorWidth="100dp"
选中时文字的颜色:

app:xTabSelectedTextColor="#03A9F4"
最小的宽度:

app:xTabMinWidth="240dp"
最大的宽度:

 app:xTabMaxWidth="480dp"

代码中找到id后,设置和viewpager联动即可

  //设置viewpager和Xtablayout联动
        xTablayout.setupWithViewPager(viewPager);



发布了110 篇原创文章 · 获赞 32 · 访问量 7万+
展开阅读全文

Android 的 Tablayout 与 ViewPager 配合使用的问题

11-10

今天在尝试 Tablayout 与 ViewPager结合使用,结果遇到下面问题。 当我滑动到如图所示的位置时(由Tab2 向Tab 3 过度,恰好Tab3 的颜色改变时): ![图片说明](https://img-ask.csdn.net/upload/201511/10/1447145557_735064.png) 此时,松开,就会发生下面的情况:![图片说明](https://img-ask.csdn.net/upload/201511/10/1447145670_781139.png) Tab3 的颜色改变,但是 指示器和 下面的ViewPager 都属于 Tab2 。 希望有朋友帮忙解答一下。 代码简单,只贴出主要代码了。 布局文件XML ``` <LinearLayout 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" android:orientation="vertical" tools:context=".MainActivityFragment"> <android.support.design.widget.TabLayout android:id="@+id/tabLayout" style="@style/MyTabLayout" android:layout_width="match_parent" android:layout_height="48dp" android:background="@android:color/black" /> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> ``` 主界面的代码 (Fragment),ViewPager的代码就不贴了,如果有需要 可以再贴。 ``` public class MainActivityFragment extends Fragment { private TabLayout mTabLayout; private ViewPager mViewPager; private SimpleAdapter mAdapter; private List<ViewPagerFragment> mFragmentList; String[] mTitleArray = {"Tab 1", "Tab 2", "Tab 3", "Tab 4"}; public MainActivityFragment() { } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_main, container, false); mTabLayout = (TabLayout) view.findViewById(R.id.tabLayout); mViewPager = (ViewPager) view.findViewById(viewPager); int size = mTitleArray.length; mFragmentList = new ArrayList<>(); for (int index = 0; index < size; index++) { ViewPagerFragment frag1 = new ViewPagerFragment(); frag1.setTitle("Title " + (index + 1)); mFragmentList.add(frag1); } if (mTitleArray.length > 4) { mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); } else { mTabLayout.setTabMode(TabLayout.MODE_FIXED); } mAdapter = new SimpleAdapter(getChildFragmentManager()); mAdapter.setFragmentList(mFragmentList); mAdapter.setTitleArray(mTitleArray); mViewPager.setAdapter(mAdapter); mViewPager.setCurrentItem(0); mTabLayout.setupWithViewPager(mViewPager); mTabLayout.setTabsFromPagerAdapter(mAdapter); return view; } class SimpleAdapter extends FragmentStatePagerAdapter { private List<ViewPagerFragment> mList; private String[] mArray; public SimpleAdapter(FragmentManager fm) { super(fm); } public void setFragmentList(List<ViewPagerFragment> list) { mList = list; } public void setTitleArray(String[] array) { mArray = array; } @Override public Fragment getItem(int position) { return mList.get(position); } @Override public CharSequence getPageTitle(int position) { return mArray[position]; } @Override public int getCount() { return mList.size(); } } } ``` 问答

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览