获得像这样的标签式布局布局(活动活动下划线)

时间:2012-08-31 23:24:37

标签: android android-layout

我首先向您展示我想要获得的布局: enter image description here

有两个部分,活动的一个是红色下划线,带有1dp行:如果用户切换到第2部分,则第2部分加下划线,而第1部分不再。 请注意,我不希望标签活动中的图标,布局必须像图片中一样:只是带下划线的文字。

此外,另一条黑色1dp线将顶部导航栏与基础内容分开。 你能帮助我吗?我不一定需要标签活动,即使只是线性布局和形状的组合也很好!

1 个答案:

答案 0 :(得分:1)

这附带了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()方法中取消案例2:line(如果只需要两个选项卡)。

您必须在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" />
相关问题