Question

我想在我的Android应用程序项目中创建自定义的可滑动选项卡，正如我在

中提供的那样

图片

picture here

Answer 1

试试这个.. 我试过......你可以做得很好..

<强> activity_main.xml中

 <RelativeLayout
    android:id="@+id/main_layout"
    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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:background="?attr/colorPrimary"
        android:elevation="6dp"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/toolbar"
        android:background="?attr/colorPrimary"
        android:elevation="6dp"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/tab_layout"/>
</RelativeLayout>

在您的MainActivity中

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

...........................
...........................

        TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
        tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
        tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
        tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
        tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

        final ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
        final PagerAdapter adapter = new PagerAdapter
                (getSupportFragmentManager(), tabLayout.getTabCount());
        viewPager.setAdapter(adapter);
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                viewPager.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
    }

添加 PagerAdapter.java

package com.truiton.designsupporttabs;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;

public class PagerAdapter extends FragmentStatePagerAdapter {
    int mNumOfTabs;

    public PagerAdapter(FragmentManager fm, int NumOfTabs) {
        super(fm);
        this.mNumOfTabs = NumOfTabs;
    }

    @Override
    public Fragment getItem(int position) {

        switch (position) {
            case 0:
                TabFragment1 tab1 = new TabFragment1();
                return tab1;
            case 1:
                TabFragment2 tab2 = new TabFragment2();
                return tab2;
            case 2:
                TabFragment3 tab3 = new TabFragment3();
                return tab3;
            default:
                return null;
        }
    }

    @Override
    public int getCount() {
        return mNumOfTabs;
    }
}

引用...

http://www.truiton.com/2015/06/android-tabs-example-fragments-viewpager/

Answer 2

由于SO中不允许仅链接答案，因此添加了某些步骤。

第1步： 定义将用于每个选项卡的三组不同的片段类。 [Android建议使用片段而不是活动]

第2步： 定义一个Pager适配器，它将帮助您在每个选项卡下加载上述三个片段。

第3步： 在主活动中定义tablayout，并设置上面的适配器，如教程链接中所示。

请参考以下教程，这是非常基础的，可以帮助您实现所需。

http://www.truiton.com/2015/06/android-tabs-example-fragments-viewpager/

以上链接仅指导您实施可滑动视图。如果您需要实现精确的设计，例如您发布的图片需要在您的样式xml中进行一些工作，或者在这里尝试使用可绘制的图像。

One more useful link

让我知道查询。

修改

我也提到@kush提到的同样的东西。

Answer 3

我找到了一种使用pageadapter制作类似标签布局的方法。以下是相同的代码。

MainActivity代码：

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;

public class MainActivity extends FragmentActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // Get the view from activity_main.xml
    setContentView(R.layout.activity_main);

    // Locate the viewpager in activity_main.xml
    ViewPager viewPager = (ViewPager) findViewById(R.id.pager);

    // Set the ViewPagerAdapter into ViewPager
    viewPager.setAdapter(new PagerAdapter(getSupportFragmentManager()));
    }
}

MainActivity.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<android.support.v4.view.PagerTabStrip
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="top"
    android:paddingBottom="10dp"
    android:paddingTop="10dp"
    android:textColor="#000000" />

</android.support.v4.view.ViewPager>

PageAdapter.java

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class PagerAdapter extends FragmentPagerAdapter {

final int PAGE_COUNT = 3;
// Tab Titles
private String tabtitles[] = new String[] { "PLAYLIST", "SONGS", "ALBUMS" };
Context context;

public PagerAdapter(FragmentManager fm) {
    super(fm);
}

@Override
public int getCount() {
    return PAGE_COUNT;
}

@Override
public Fragment getItem(int position) {
    switch (position) {

        // Open FragmentTab1.java
        case 0:
            SongsList fragmenttab1 = new SongsList();
            return fragmenttab1;

        // Open FragmentTab2.java
        case 1:
            SecondFragment fragmenttab2 = new SecondFragment();
            return fragmenttab2;

        // Open FragmentTab3.java
        case 2:
            ThirdFragment fragmenttab3 = new ThirdFragment();
            return fragmenttab3;
    }
    return null;
}

@Override
public CharSequence getPageTitle(int position) {
    return tabtitles[position];
}
}

您可以在项目中创建n个片段。这是示例片段代码。

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class SecondFragment extends Fragment {

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Get the view from fragmenttab1.xml
    View view = inflater.inflate(R.layout.fragment_second, container, false);
    return view;
}
}

及其XML

<RelativeLayout 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" >

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:text="@string/Fragment2" />

</RelativeLayout>

添加此RESOURCE值以删除styles.xml中布局中的操作栏标题栏

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>

</style>
</resources>

如何在android中创建自定义的可滑动标签

3 个答案: