web-dev-qa-db-ja.com

Androidアイコン付きのSlidingTabLayout

ビューでGoogleのSlidingTabLayoutを使用していますが、アイコンをタブに追加したいと思います。私はこれを使用しています http://developer.Android.com/samples/SlidingTabsBasic/src/com.example.Android.common/view/SlidingTabLayout.html 誰か助けてくれますか？

void setUpPager(View view){
    mViewPager = (ViewPager) view.findViewById(R.id.viewpager);
    mViewPager.setAdapter(new TabsPagerAdapter(getActivity()));
    mSlidingTabLayout = (SlidingTabLayout) view.findViewById(R.id.sliding_tabs);
    mSlidingTabLayout.setViewPager(mViewPager);
  }

これが私のxmlです：

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
              Android:layout_width="match_parent"
              Android:layout_height="match_parent"
              Android:orientation="vertical">

  <Android.common.view.SlidingTabLayout
      Android:id="@+id/sliding_tabs"
      Android:layout_width="match_parent"
      Android:layout_height="wrap_content" />

  <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>
androidandroid-layoutandroid-tabspagerslidingtabstripandroid-tabstrip
14
user1159517

mSlidingTabLayout.setCustomTabView(int layoutResId, int textViewId)を使用して、SlidingTabLayoutタブビューのカスタムレイアウトを拡張します。

SlidingTabLayoutがタブストリップにデータを入力しようとすると、最初に、指定されたレイアウトリソースを探して拡張します。それ以外の場合は、デフォルトのタブビューが拡大されます。

15
Nikola Despotoski

正解と受け入れられた答えの例を挙げたいだけです。 :)
まず、アダプタをビューページャに追加するときに、タブを追加してカスタムビューを設定します。たとえば、次の行を参照してください。

mViewpager = (ViewPager) view.findViewById(R.id.pager);

//Do something with your view before setting up adapter

ViewPager.setAdapter(mSectionsPagerAdapter);
mSlidingTabLayout = (SlidingTabLayout) View().findViewById(R.id.sliding_tabs);
mSlidingTabLayout.setCustomTabView(R.layout.custom_tab_title, R.id.tabtext);
mSlidingTabLayout.setViewPager(mViewPager);

ここで、sliding_tabsは追加するtabs_titlesであり、xmlのviewpagerファイルで次のように定義されています。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    Android:fitsSystemWindows="true">

    <com.packagename.SlidingTabLayout
        Android:id="@+id/sliding_tabs"
        Android:layout_width="fill_parent"
        Android:layout_height="wrap_content"
        />

    <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="wrap_content"
        Android:layout_below="@+id/sliding_tabs"
        tools:context=".ActivityUser"
        Android:fitsSystemWindows="true"
        Android:textStyle="bold"
        Android:textSize="20dp"/>

</RelativeLayout>

ここで、custom_tab_titleはxmlフォルダ内の独立したlayoutファイルです。例：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:orientation="vertical" Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:id="@+id/titletab">

    <ImageView
    Android:id="@+id/tabimage"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_gravity="top"
    Android:layout_marginLeft="2dp"
    />

    <TextView
    Android:id="@+id/tabtext"
    Android:layout_width="match_parent"
    Android:layout_height="50dp"
    Android:gravity="bottom"
    Android:paddingBottom="15dp"
    Android:paddingLeft="4dp"
    Android:paddingRight="4dp"/>

</LinearLayout>

次の方法で特定のタブの画像を設定できます。

Drawable tab_image = getResources().getDrawable(getResources().getIdentifier("image_name_in_drawable", "drawable", "com.packagename"));
tab_image.setBounds(0, 0, 40, 40);  //Setting up the resolution for image
ImageSpan imageSpanresource = new ImageSpan(tab_image);
//Notice the additional space at the end of the String
resourcesstring = "Tab1 ";
//here we are setting up the position to display image..
SpannableString viewpager_tab_title = new SpannableString(resourcesstring ); 
viewpager_tab_title.setSpan(imageSpanresource, resourcesstring.length()-1, resourcesstring.length(), 0);

通知viewpager_tab_titleにスペースを追加し、画像をその位置に設定して、実際の文字列が完全に表示されるようにしました。

16
sahil shekhawat

SlidingTabLayoutを希望どおりにカスタマイズするには、populateTabStrip（）メソッドを変更するだけです。このアプローチでは、TextViewを気にする必要はありません。

public void populateTabStrip() {
        final PagerAdapter adapter = mViewPager.getAdapter();
        final View.OnClickListener tabClickListener = new TabClickListener();

        for (int i = 0; i < adapter.getCount(); i++) {
            View tabView = null;

            tabView = LayoutInflater.from(getContext()).inflate(R.layout.tab_layout, mTabStrip,
                    false);

            ImageView iconImageView = (ImageView) tabView.findViewById(R.id.tab_layout_icon);
            iconImageView.setImageDrawable(getContext().getResources().getDrawable(getIconResourceArray()[i]));

            tabView.setOnClickListener(tabClickListener);

            mTabStrip.addView(tabView);
        }
}

あなたのレイアウトはそのようなものになるでしょう：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="75dp"
    Android:paddingTop="15dp"
    Android:layout_height="50dp"
    Android:orientation="vertical">

    <ImageView
        Android:id="@+id/tab_layout_icon"
        Android:layout_width="20dp"
        Android:layout_height="20dp"
        Android:layout_gravity="center" />
</LinearLayout>

GetResourceArray（）メソッドを実装する方法は自由です。ここに私がやった方法があります：

public class IconSlidingTabLayout extends HorizontalScrollView {
    private Integer[] mIconResourceArray;

    ...

    public Integer[] getIconResourceArray() {
        return mIconResourceArray;
    }

    public void setIconResourceArray(Integer[] mIconResourceArray) {
        this.mIconResourceArray = mIconResourceArray;
    }
}

活動では：

mSlidingTabLayout = (IconSlidingTabLayout) findViewById(R.id.icon_sliding_tab_layout);
Integer[] iconResourceArray = { R.drawable.news_tab_icon,
        R.drawable.challenges_tab_icon, R.drawable.trophies_tab_icon,
        R.drawable.leaderboard_tab_icon };
mSlidingTabLayout.setIconResourceArray(iconResourceArray);

R.layout.tab_layout *にアクセスするには、SlidingTabStripではデフォルトでAndroid.Rではなくyourpackage.Rをインポートする必要があることに注意してください。

13
Samuel