android - このようなタブ付きレイアウトのようなレイアウトを取得します (アクティブなアクティビティに下線が引かれます)

Question

最初に、取得したいレイアウトを示します。ここに画像の説明を入力

2 つのセクションがあり、アクティブなセクションには 1 dp の線で赤い下線が引かれています。ユーザーがセクション 2 に切り替えると、セクション 2 に下線が引かれ、セクション 1 には下線が引かれなくなります。タブ付きアクティビティのようなアイコンは必要ないことに注意してください。レイアウトは写真のようにする必要があります。テキストに下線を引くだけです。

さらに、別の 1 dp の黒い線が、上部のナビゲーションバーを下のコンテンツから分離します。助けてもらえますか?タブ付きのアクティビティは必ずしも必要ではありません。直線的なレイアウトと形状の組み合わせだけでも問題ありません!

score 1 · Accepted Answer

これには、android sdk20 が付属しています。スワイプジェスチャ (あるタブから別のタブに移動する) を使用する場合と使用しない場合の 2 つのタイプがあります。

スワイプなし:

        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() メソッドを変更して (3 ではなく) 2 を返すようにし、getPageTitle() メソッドで case 2: 行 (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 クラスがあります。独自のフラグメントを作成し、アクティビティのクラス内の呼び出しをフラグメントの名前と一致するように変更する必要があります。

編集：レイアウトフォルダー内（res内）に作成する必要があるxmlを貼り付けるのを忘れました。

スワイプジェスチャのないタブ: 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