タブアイコンとテキストの両方を使用Androidデザインサポートライブラリ

Question

] 1 ] 1 私はAndroidデザインサポートタブレイアウトを使用し、タブにアイコンとテキストの両方を取得しました..私は使用しましたアイコンとテキストを垂直方向に揃えるcustomtabview ..そして、選択/選択解除時にアイコンとテキストの色を変更したい。

別のタブアイコンのセレクターファイルを作成しましたが、プロジェクトを実行すると、最初のデフォルトタブが選択解除され、デフォルトで選択されるようにします。他のタブに移動してから最初のタブにスワイプして戻る場合それは完全に正常に動作します..主な問題は、最初のタブフラグメントを選択できないことです..過去2日間スタックしているので助けてください..そしてgithubのライブラリを使用したくない

MainActivity.Java

import Android.support.v7.app.AppCompatActivity;
import Android.os.Bundle;
import Android.view.Menu;
import Android.view.MenuItem;
import Android.os.Bundle;
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.support.v7.widget.Toolbar;

import Java.util.ArrayList;
import Java.util.List;
import Android.os.Bundle;
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.support.v7.widget.Toolbar;
import Android.view.LayoutInflater;
import Android.widget.TextView;

import Java.util.ArrayList;
import Java.util.List;



public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;
    private TabLayout tabLayout;
    private ViewPager viewPager;
    private int[] tabIcons = {
            R.drawable.image1,
            R.drawable.image2,
            R.drawable.image3
    };

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

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        viewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager);

        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);
        setupTabIcons();
    }

    private void setupTabIcons() {

        TextView tabOne = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
        tabOne.setText("ONE");
        tabOne.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.image1, 0, 0);
        tabLayout.getTabAt(0).setCustomView(tabOne);

        TextView tabTwo = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
        tabTwo.setText("TWO");
        tabTwo.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.image2, 0, 0);
        tabLayout.getTabAt(1).setCustomView(tabTwo);

        TextView tabThree = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
        tabThree.setText("THREE");
        tabThree.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.image3, 0, 0);
        tabLayout.getTabAt(2).setCustomView(tabThree);
    }

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFrag(new OneFragment(), "ONE");
        adapter.addFrag(new TwoFragment(), "TWO");
        adapter.addFrag(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 addFrag(Fragment fragment, String title) {
            mFragmentList.add(fragment);
            mFragmentTitleList.add(title);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mFragmentTitleList.get(position);
        }
    }
}

image1.xml

 <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
        <item Android:drawable="@drawable/x1" Android:state_selected="true" />
        <item Android:drawable="@drawable/x2" />
    </selector>

3つの異なる画像に対して上記のように3つのファイルをクレスティングしました。

custom_tab.xml

<TextView xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:id="@+id/tab"
    Android:textColor="@color/selector"
    Android:textSize="@dimen/tab_label"
    Android:fontFamily="@string/font_fontFamily_medium"/>

テキスト用のselector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_selected="true"
        Android:color="#fe5d55" /> <!-- pressed -->
    <item Android:state_pressed="true"
        Android:color="#fe5d55" /> <!-- focused -->
    <item Android:color="#000000" /> <!-- default -->
</selector>

誰か助けてもらえますか？

Answer 1

選択されていないとはどういう意味ですか。あなたが達成しようとしていることとあなたが今どこにいるのかというイメージを共有できますか？.

私はあなたのアプローチをお勧めしません。それはあなたの問題を解決するために必要とされない多くのことをします。 TabLayoutクラスのアイコンとテキストを利用して、アイコン（状態のある描画可能オブジェクト）とテキストを設定することをお勧めします。または、必要に応じてカスタムレイアウトでも、TabLayoutのtext1とアイコンを使用します。これを行うのに問題がありますか？

---

更新..

以下をお試しください：

IconTextTabLayout.Java：

package example.customtabs;

import Android.content.Context;
import Android.support.annotation.NonNull;
import Android.support.design.widget.TabLayout;
import Android.support.v4.view.PagerAdapter;
import Android.util.AttributeSet;

import sample.customtabs.example.com.customtabs.R;


public class IconTextTabLayout extends TabLayout {


    public IconTextTabLayout(Context context) {
        super(context);
    }

    public IconTextTabLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public IconTextTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public void setTabsFromPagerAdapter(@NonNull PagerAdapter adapter) {
        this.removeAllTabs();
        int i = 0;
        for (int count = adapter.getCount(); i < count; ++i) {
            this.addTab(this.newTab().setCustomView(R.layout.custom_tab)
                    .setIcon(YourIcons[i])
                    .setText(adapter.getPageTitle(i)));
        }
    }
}

custom_tab.xml

<?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:orientation="vertical">


    <ImageView
        Android:id="@Android:id/icon"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"/>

    <TextView
        Android:id="@Android:id/text1"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"/>

</LinearLayout>

アクティビティxmlでIconTextTabLayoutを使用します。お気に入り ：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">

    <example.customtabs.IconTextTabLayout
        Android:id="@+id/sliding_tabs"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        app:tabMode="scrollable"/>

    <Android.support.v4.view.ViewPager
        Android:id="@+id/viewpager"
        Android:layout_width="match_parent"
        Android:layout_height="0px"
        Android:layout_weight="1"
        Android:background="@Android:color/white"/>

</LinearLayout>

また、次のようなアクティビティでビューページャーを設定します。

IconTextTabLayout tabLayout = (IconTextTabLayout) findViewById(R.id.sliding_tabs);
tabLayout.setupWithViewPager(viewPager);

ビューページャーアダプターのgetPageTitleをオーバーライドして、タイトルを指定します。

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

さらに、必要に応じて、getPageTitleメソッドのように、ドローアブルを返すメソッドを作成することで、アダプターからアイコンを取得することもできます。これはオプションです。デザインの問題です。

-

YourIcons[] =これはドローアブルの配列です。あなたの場合-選択された画像と選択されていない画像を含むxmlファイル...

Answer 2

@Abhilashの回答で指定されているようにTabLayoutをカスタマイズする代わりに、以下のコードにtabOne.setSelected(true);という行を追加するだけです。

TextView tabOne = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
tabOne.setText("ONE");
tabOne.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.image1, 0, 0);
tabOne.setSelected(true);  //This will make your tab by default selected
tabLayout.getTabAt(0).setCustomView(tabOne);