android - 获得像这样的选项卡式布局（活动活动下划线）

Question

我首先向您展示我想获得的布局：在此处输入图像描述

有两个部分，活动的一个带有红色下划线，带有 1dp 线：如果用户切换到第 2 部分，则第 2 部分带有下划线，而第 1 部分不再存在。 请注意，我不想要选项卡式活动中的图标，布局必须像图片中一样：只是带下划线的文本。

此外，另一条黑色 1dp 线将顶部导航栏与底层内容分开。你能帮帮我吗？我不一定需要选项卡式活动，即使只是线性布局和形状的组合也可以！

score 1 · Accepted Answer

这带有android sdk20。有两种可能的类型，带有或不带有滑动手势（从一个选项卡转到另一个选项卡）。

无需滑动：

        import android.app.ActionBar;
        import android.app.FragmentTransaction;
        import android.os.Bundle;
        import android.support.v4.app.Fragment;
        import android.support.v4.app.FragmentActivity;
        import android.view.Gravity;
        import android.view.LayoutInflater;
        import android.view.Menu;
        import android.view.View;
        import android.view.ViewGroup;
        import android.widget.TextView;

   public class Tabs extends FragmentActivity implements ActionBar.TabListener {

private static final String STATE_SELECTED_NAVIGATION_ITEM = "selected_navigation_item";

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.tabs);

    // Set up the action bar.
    final ActionBar actionBar = getActionBar();
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

    // For each of the sections in the app, add a tab to the action bar.
    actionBar.addTab(actionBar.newTab().setText(R.string.title_section1).setTabListener(this));
    actionBar.addTab(actionBar.newTab().setText(R.string.title_section2).setTabListener(this));
    actionBar.addTab(actionBar.newTab().setText(R.string.title_section3).setTabListener(this));
}

@Override
public void onRestoreInstanceState(Bundle savedInstanceState) {
    if (savedInstanceState.containsKey(STATE_SELECTED_NAVIGATION_ITEM)) {
        getActionBar().setSelectedNavigationItem(
                savedInstanceState.getInt(STATE_SELECTED_NAVIGATION_ITEM));
    }
}

@Override
public void onSaveInstanceState(Bundle outState) {
    outState.putInt(STATE_SELECTED_NAVIGATION_ITEM,
            getActionBar().getSelectedNavigationIndex());
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.tabs, menu);
    return true;
}



@Override
public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
}

@Override
public void onTabSelected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
    // When the given tab is selected, show the tab contents in the container
    Fragment fragment = new DummySectionFragment();
    Bundle args = new Bundle();
    args.putInt(DummySectionFragment.ARG_SECTION_NUMBER, tab.getPosition() + 1);
    fragment.setArguments(args);
    getSupportFragmentManager().beginTransaction()
            .replace(R.id.container, fragment)
            .commit();
}

@Override
public void onTabReselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
}

/**
 * A dummy fragment representing a section of the app, but that simply displays dummy text.
 */
public static class DummySectionFragment extends Fragment {
    public DummySectionFragment() {
    }

    public static final String ARG_SECTION_NUMBER = "section_number";

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        TextView textView = new TextView(getActivity());
        textView.setGravity(Gravity.CENTER);
        Bundle args = getArguments();
        textView.setText(Integer.toString(args.getInt(ARG_SECTION_NUMBER)));
        return textView;
    }
}
 }

这是标签+滑动：

     import android.app.ActionBar;
     import android.app.FragmentTransaction;
     import android.content.Context;
     import android.os.Bundle;
     import android.support.v4.app.Fragment;
     import android.support.v4.app.FragmentActivity;
     import android.support.v4.app.FragmentManager;
     import android.support.v4.app.FragmentPagerAdapter;
     import android.support.v4.app.NavUtils;
     import android.support.v4.view.ViewPager;
     import android.view.Gravity;
     import android.view.LayoutInflater;
     import android.view.Menu;
     import android.view.MenuItem;
     import android.view.View;
     import android.view.ViewGroup;
     import android.widget.TextView;

    public class TabsSwipe extends FragmentActivity implements ActionBar.TabListener {

/**
 * The {@link android.support.v4.view.PagerAdapter} that will provide fragments for each of the
 * sections. We use a {@link android.support.v4.app.FragmentPagerAdapter} derivative, which will
 * keep every loaded fragment in memory. If this becomes too memory intensive, it may be best
 * to switch to a {@link android.support.v4.app.FragmentStatePagerAdapter}.
 */
SectionsPagerAdapter mSectionsPagerAdapter;

/**
 * The {@link ViewPager} that will host the section contents.
 */
ViewPager mViewPager;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.tabs_swipe_new);
    // Create the adapter that will return a fragment for each of the three primary sections
    // of the app.
    mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());

    // Set up the action bar.
    final ActionBar actionBar = getActionBar();
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

    // Set up the ViewPager with the sections adapter.
    mViewPager = (ViewPager) findViewById(R.id.pager);
    mViewPager.setAdapter(mSectionsPagerAdapter);

    // When swiping between different sections, select the corresponding tab.
    // We can also use ActionBar.Tab#select() to do this if we have a reference to the
    // Tab.
    mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
        @Override
        public void onPageSelected(int position) {
            actionBar.setSelectedNavigationItem(position);
        }
    });

    // For each of the sections in the app, add a tab to the action bar.
    for (int i = 0; i < mSectionsPagerAdapter.getCount(); i++) {
        // Create a tab with text corresponding to the page title defined by the adapter.
        // Also specify this Activity object, which implements the TabListener interface, as the
        // listener for when this tab is selected.
        actionBar.addTab(
                actionBar.newTab()
                        .setText(mSectionsPagerAdapter.getPageTitle(i))
                        .setTabListener(this));
    }
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.tabs_swipe_new, menu);
    return true;
}



@Override
public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
}

@Override
public void onTabSelected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
    // When the given tab is selected, switch to the corresponding page in the ViewPager.
    mViewPager.setCurrentItem(tab.getPosition());
}

@Override
public void onTabReselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
}

/**
 * A {@link FragmentPagerAdapter} that returns a fragment corresponding to one of the primary
 * sections of the app.
 */
public class SectionsPagerAdapter extends FragmentPagerAdapter {

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

    @Override
    public Fragment getItem(int i) {
        Fragment fragment = new DummySectionFragment();
        Bundle args = new Bundle();
        args.putInt(DummySectionFragment.ARG_SECTION_NUMBER, i + 1);
        fragment.setArguments(args);
        return fragment;
    }

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

    @Override
    public CharSequence getPageTitle(int position) {
        switch (position) {
            case 0: return getString(R.string.title_section1).toUpperCase();
            case 1: return getString(R.string.title_section2).toUpperCase();
            case 2: return getString(R.string.title_section3).toUpperCase();
        }
        return null;
    }
}

/**
 * A dummy fragment representing a section of the app, but that simply displays dummy text.
 */
public static class DummySectionFragment extends Fragment {
    public DummySectionFragment() {
    }

    public static final String ARG_SECTION_NUMBER = "section_number";

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        TextView textView = new TextView(getActivity());
        textView.setGravity(Gravity.CENTER);
        Bundle args = getArguments();
        textView.setText(Integer.toString(args.getInt(ARG_SECTION_NUMBER)));
        return textView;
    }
}
 }

要更改选项卡的数量，只需更改 getCount() 方法并使其返回 2（而不是 3）并在 getPageTitle() 方法中取消 case 2: 行（如果您只需要两个选项卡）。

您必须在 Android 4.0 或更高版本上运行它。

要使其在较低的 android 版本上运行，您必须使用 ActionBarSherlock 库。您将必须在您的项目中实现它（自己看看如何做到这一点），然后您将不得不更改此代码的某些内容。

public class TabsSwipe extends FragmentActivity implements ActionBar.TabListener {

至

public class TabsSwipe extends SherlockFragmentActivity implements ActionBar.TabListener {

然后：

-删除所有导入并重新开始导入，当您有选择时，请始终选择“support.v4”。选项或“com.actionbarsherlock.app”。选项

- getActionBar() 到 getSupportActionBar() 的所有发生

-getMenuInflater() 到 getSupportMenuInflater() 的所有发生

有一个 DummySectionFragment 类，这只是片段的一个示例，您必须构建自己的片段并更改活动类中的调用以匹配您的片段名称。

编辑：我忘记粘贴您必须在布局文件夹中创建的 xml（在 res 内）。

没有滑动手势的选项卡：tabs.xml

    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Tabs" />

带有滑动手势的选项卡：tabs_swipe_new.xml

    <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".TabsSwipe" />

android - 获得像这样的选项卡式布局（活动活动下划线）

1 回答 1

Related

Reference