【问题标题】:Android Design Support Library TabLayout using custom tabs layout but layout wrapping the tabsAndroid 设计支持库 TabLayout 使用自定义选项卡布局但布局包装选项卡
【发布时间】:2015-10-31 14:28:55
【问题描述】:

在选项卡自定义布局中,我将其父元素设置为 match_parent 并设置其背景颜色。当我运行它时,会显示包含元素 imageview 和 textview 的自定义布局。我希望这个自定义布局将填充选项卡,选项卡之间没有任何空格。 在此处检查输出:

private void setupTabLayout(ViewPager viewPager, ViewPagerAdapter viewPagerAdapter) {
    TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
    tabLayout.setupWithViewPager(viewPager);

    int length = tabLayout.getTabCount();
    for (int i = 0; i < length; i++) {
        tabLayout.getTabAt(i).setCustomView(viewPagerAdapter.getTabView(i));
    }
}

tab_layout.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/layout"
    android:background="@color/grey_accent">

    <ImageView
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/icon"
        android:src="@drawable/ic_action_home"
        android:layout_marginBottom="19dp"
        android:layout_above="@+id/title"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_gravity="center"
        android:textColor="@color/white"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Home"
        android:id="@+id/title"
        android:layout_marginBottom="259dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

ViewPagerAdapter:

public View getTabView(int position) {
    View view = LayoutInflater.from(this.context).inflate(R.layout.tab_layout, null);
    TextView title = (TextView) view.findViewById(R.id.title);
    ImageView icon = (ImageView) view.findViewById(R.id.icon);
    ViewGroup layout = (ViewGroup) view.findViewById(R.id.layout);

    layout.setBackgroundResource(this.mColorList.get(position));
    icon.setImageResource(this.mIconList.get(position));
    title.setText(this.getPageTitle(position));

    return view;
}

【问题讨论】:

    标签: android android-layout android-design-library androiddesignsupport android-tablayout


    【解决方案1】:

    第 1 步:为自定义标签添加 xml 布局代码

    <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentBottom="true">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    
        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="scrollable"
            android:background="@color/white"
            app:tabGravity="center" />
    
    </android.support.design.widget.AppBarLayout>
    
    
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_marginBottom="50dp"/>
    

    第 2 步:标签活动的 Java 代码

    public class BookingsTabs extends AppCompatActivity {
        String url, smobile, snames, semail, sid, stoken, responseServer;
        String id, token, did, stsid, processresponse, type, cancelresponse;
        TextView tv1;
        Button cretedeal;
        ViewbookingsAdapter adapter;
        ViewbookingsAdapter2 adapter2;
        LinearLayout order;
        private Tracker mTracker;
        ProgressDialog pDialog;
        ListView listview;
        private Toolbar toolbar;
        private TabLayout tabLayout;
        private ViewPager viewPager;
        AnalyticsApplication application1;
        SessionManagement session;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.view_bookings);
    
            toolbar = (Toolbar) findViewById(R.id.toolbar);
            setSupportActionBar(toolbar);
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
            if (toolbar != null) {
                setSupportActionBar(toolbar);
                ActionBar actionBar = getSupportActionBar();
                actionBar.setDisplayHomeAsUpEnabled(true);
                actionBar.setDisplayShowHomeEnabled(true);
                actionBar.setDisplayShowTitleEnabled(true);
                actionBar.setDisplayUseLogoEnabled(false);
                actionBar.setHomeButtonEnabled(true);
            }
    
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
                getWindow().setStatusBarColor(getResources().getColor(R.color.colorPrimaryDark));
            }
            viewPager = (ViewPager) findViewById(R.id.viewpager);
            setupViewPager(viewPager);
            int defaultValue = 0;
            int page = getIntent().getIntExtra("TAB", defaultValue);
            viewPager.setCurrentItem(page);
            application1 = (AnalyticsApplication) getApplication();
            mTracker = application1.getDefaultTracker();
            tabLayout = (TabLayout) findViewById(R.id.tabs);
            tabLayout.setupWithViewPager(viewPager);
            tabLayout.setSelectedTabIndicatorColor(getResources().getColor(R.color.accentColor));
            tabLayout.setTabTextColors(ContextCompat.getColorStateList(this, R.color.aquablue));
    
            tabLayout.getTabAt(0).setCustomView(R.layout.aquablue);
            tabLayout.getTabAt(1).setCustomView(R.layout.orangeprocess);
            tabLayout.getTabAt(2).setCustomView(R.layout.shipping);
            tabLayout.getTabAt(3).setCustomView(R.layout.deliver);
            tabLayout.getTabAt(4).setCustomView(R.layout.completedtxt);
            tabLayout.getTabAt(5).setCustomView(R.layout.cancelled);
    
            callAsynchronousTask();
            viewPager.setCurrentItem(0);
        }
    
        private void setupViewPager(ViewPager viewPager) {
            ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
            adapter.addFrag(new OrderplacedFragment(), "Order Placed");
            adapter.addFrag(new ProcessingFragment(), "Processing");
            adapter.addFrag(new ShippingFragment(), "Shipping");
            adapter.addFrag(new DeliveredFragment(), "Delivered");
            adapter.addFrag(new CompletedFragment(), "Completed");
            adapter.addFrag(new CancelledFragment(), "Cancelled");
            viewPager.setAdapter(adapter);
        }
    
        class ViewPagerAdapter extends FragmentPagerAdapter {
            private final List<Fragment> mFragmentList = new ArrayList<>();
            private final List<String> mFragmentTitleList = new ArrayList<>();
    
            public ViewPagerAdapter(FragmentManager manager) {
                super(manager);
            }
    
            @Override
            public Fragment getItem(int position) {
                if (position == 0) {
    
                }
                return mFragmentList.get(position);
            }
    
            @Override
            public int getCount() {
                return mFragmentList.size();
            }
    
            public void addFrag(Fragment fragment, String title) {
                mFragmentList.add(fragment);
                mFragmentTitleList.add(title);
            }
    
            @Override
            public CharSequence getPageTitle(int position) {
                return mFragmentTitleList.get(position);
            }
        }
    }
    

    第 3 步:我在下面添加了一个与其他选项卡相同的选项卡的示例选项卡代码片段

    获取任何列表视图或一些数据的xml代码

    public class OrderplacedFragment extends Fragment {
        View mMainView;
        String url, smobile, snames, semail, sid, stoken, responseServer;
        Context context;
        ViewbookingsAdapter adapter;
        ViewbookingsAdapter2 adapter2;
        ListView listview;
        LinearLayout tv1;
        TextView create;
        ArrayList<HashMap<String, String>> processlist, hatfilterslist;
        SessionManagement session;
        private SwipeRefreshLayout mSwipeRefreshLayout = null;
    
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    
            mMainView = inflater.inflate(R.layout.listview_orderbookings, container, false);
    
            listview = (ListView) mMainView.findViewById(R.id.listview);
    
            pDialog = new ProgressDialog(getActivity());
            pDialog.setMessage("Loading...");
            pDialog.setMax(5);
            Intent j = getActivity().getIntent();
            coupon_code = j.getStringExtra("code");
            create = (TextView) mMainView.findViewById(R.id.dealslist);
            tv1 = (LinearLayout) mMainView.findViewById(R.id.no_deals_linear);
            create = (TextView) mMainView.findViewById(R.id.dealslist);
            create.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
    
                    Intent i = new Intent(getActivity(), MyDealsActivity.class);
                    startActivity(i);
    
                }
            });
            tv1.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
    
                    Intent i = new Intent(getActivity(), MyDealsActivity.class);
                    startActivity(i);
                }
            });
    
            return mMainView;
        }
    }
    

    在这个选项卡中,我们也可以添加计数。如果您对此有任何疑问,请咨询我

    【讨论】:

    • 标签项文件在哪里?
    【解决方案2】:

    您可以使用材料设计选项卡布局,然后为所有选项卡提供自定义视图。 如需完整参考,请访问:Custom Tablayout Example

    所有选项卡的自定义视图可以是这样的:

    <?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="match_parent"
        android:gravity="center"
        android:orientation="vertical">
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:id="@+id/ll"
            android:orientation="horizontal"
            android:layout_weight="1"
            android:gravity="center">
    
            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@mipmap/ic_launcher"/>
            <TextView
                android:id="@+id/tvtab1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="ONE"
                android:textColor="@color/colorAccent"
                android:textSize="14sp"
                android:textStyle="bold" />
        </LinearLayout>
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:id="@+id/ll2"
            android:orientation="vertical"
            android:gravity="center">
            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@mipmap/ic_launcher"/>
    
            <TextView
                android:id="@+id/tvtab2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TWO"
                android:textColor="#26e9dc"
                android:textSize="14sp"
                android:textStyle="bold" />
        </LinearLayout>
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:id="@+id/ll3"
            android:orientation="vertical"
            android:gravity="center">
    
            <TextView
                android:id="@+id/tvtab3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="THREE"
                android:textColor="#d8ea2b"
                android:textSize="14sp"
                android:textStyle="bold" />
            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@mipmap/ic_launcher"/>
        </LinearLayout>
    </LinearLayout>
    

    活动的xml文件代码(activity_main.xml)

    <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    
            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabTextColor="#fff"
                app:tabSelectedTextColor="#000"
                app:tabGravity="fill"
                app:tabMode="fixed" />
    
        </android.support.design.widget.AppBarLayout>
    
        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    
    </android.support.design.widget.CoordinatorLayout>
    

    MainActivity.java

    的最终代码
    import android.content.Context;
    import android.support.design.widget.TabLayout;
    import android.support.v4.app.Fragment;
    import android.support.v4.app.FragmentManager;
    import android.support.v4.app.FragmentPagerAdapter;
    import android.support.v4.view.ViewPager;
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.widget.LinearLayout;
    import java.util.ArrayList;
    import java.util.List;
    
    public class MainActivity extends AppCompatActivity {
    
        private TabLayout tabLayout;
        public ViewPager viewPager;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            viewPager = (ViewPager) findViewById(R.id.viewpager);
            setupViewPager(viewPager);
    
            tabLayout = (TabLayout) findViewById(R.id.tabs);
            tabLayout.setupWithViewPager(viewPager);
    
            View headerView = ((LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE))
                    .inflate(R.layout.custom_tab, null, false);
    
            LinearLayout linearLayoutOne = (LinearLayout) headerView.findViewById(R.id.ll);
            LinearLayout linearLayout2 = (LinearLayout) headerView.findViewById(R.id.ll2);
            LinearLayout linearLayout3 = (LinearLayout) headerView.findViewById(R.id.ll3);
    
            tabLayout.getTabAt(0).setCustomView(linearLayoutOne);
            tabLayout.getTabAt(1).setCustomView(linearLayout2);
            tabLayout.getTabAt(2).setCustomView(linearLayout3);
    
        }
    
        private void setupViewPager(ViewPager viewPager) {
            ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
            adapter.addFragment(new OneFragment(), "ONE");
            adapter.addFragment(new TwoFragment(), "TWO");
            adapter.addFragment(new ThreeFragment(), "THREE");
            viewPager.setAdapter(adapter);
        }
    
        class ViewPagerAdapter extends FragmentPagerAdapter {
            private final List<Fragment> mFragmentList = new ArrayList<>();
            private final List<String> mFragmentTitleList = new ArrayList<>();
    
            public ViewPagerAdapter(FragmentManager manager) {
                super(manager);
            }
    
            @Override
            public Fragment getItem(int position) {
                return mFragmentList.get(position);
            }
    
            @Override
            public int getCount() {
                return mFragmentList.size();
            }
    
            public void addFragment(Fragment fragment, String title) {
                mFragmentList.add(fragment);
                mFragmentTitleList.add(title);
            }
    
            @Override
            public CharSequence getPageTitle(int position) {
                return mFragmentTitleList.get(position);
            }
        }
    }
    

    【讨论】:

      【解决方案3】:

      使用 应用:tabMaxWidth="44dp" app:tabMinWidth="44dp"

      【讨论】:

        【解决方案4】:

        试试这个

        <android.support.design.widget.TabLayout
            app:tabPaddingStart="-1dp"
            app:tabPaddingEnd="-1dp"/>
        

        我找到了here

        【讨论】:

        • app:tabPaddingStart="0dp" app:tabPaddingEnd="0dp" 为我工作。
        • 这对于“可滚动”标签布局根本不起作用
        【解决方案5】:

        当您使用inflate(R.layout.tab_layout, null) 时,您是在说根本没有父级View。根据this pro-tip,这会导致所有layout_ 属性被丢弃。

        相反,您应该传入TabLayoutfalse(即不要自动附加View):这样可以确保属性不会被忽略。

        public View getTabView(TabLayout tabLayout, int position) {
            View view = LayoutInflater.from(this.context)
                .inflate(R.layout.tab_layout, tabLayout, false);
            TextView title = (TextView) view.findViewById(R.id.title);
            ImageView icon = (ImageView) view.findViewById(R.id.icon);
            ViewGroup layout = (ViewGroup) view.findViewById(R.id.layout);
        
            layout.setBackgroundResource(this.mColorList.get(position));
            icon.setImageResource(this.mIconList.get(position));
            title.setText(this.getPageTitle(position));
        
            return view;
        }
        

        【讨论】:

        • 我按照你说的试过了,但它不起作用,我得到了相同的输出。
        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2018-06-23
        • 2012-01-19
        • 1970-01-01
        • 2017-03-21
        • 1970-01-01
        • 2015-11-28
        • 1970-01-01
        相关资源
        最近更新 更多