web-dev-qa-db-ja.com

Android角の丸いタブレイアウトタブ

このタイプの質問は以前に尋ねられたものの、適切で実用的な解決策が得られなかったため、この質問を再度投稿します。もう一度質問して、時間を無駄にして申し訳ありません。実用的な解決策を教えてください。または、私が何か間違ったことをしている場合はお知らせください。前もって感謝します。

予期されるタブ： On select of Tab it should come like this

しかし、次のように来る：

今後のタブ Coming Tabs

ページの[読み込み]タブは「予想されるタブ」の画像のように表示されますが、選択後は「今後のタブ」の画像のようになります。 MainXMLコード：

 <Android.support.design.widget.TabLayout
                Android:id="@+id/tabs"
                style="@style/MyCustomTabLayout"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:background="@drawable/background_img_jpeg"
                Android:minHeight="10dp"
                Android:padding="10dp"
                app:tabGravity="fill"
                app:tabIndicatorColor="@color/TRANSPARENT"
                app:tabMode="fixed"
                app:tabTextColor="@color/blue" />

@ style/MyCustomTabLayout

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
        <item name="tabBackground">@drawable/tab_bg</item>
    </style>

@ drawable/tab_bg

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_selected="true"
        Android:drawable="@drawable/tab_bgselected" />
    <item Android:drawable="@drawable/tab_bgnotselected" />
    </selector>

@ drawable/tab_bgselected

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">

    <item Android:bottom="0dp"  Android:top="0dp"
          Android:left="0dp" Android:right="0dp" >
        <shape Android:shape="rectangle">
            <solid Android:color="@color/blue" />
            <corners
                Android:topLeftRadius="10dp"
                Android:bottomLeftRadius="10dp">
            </corners>
        </shape>
    </item>
</layer-list>

そのように@ drawable/tab_bgnotselected

そして、背後にあるコードで私は書きました：

tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                try {
                    mViewPager.setCurrentItem(tab.getPosition());
                    TabPosition = tab.getPosition();
                    TabCount = tabLayout.getTabCount();

                    try {
                        if (TabPosition == 0) {
                            GradientDrawable drawable = (GradientDrawable) getResources().getDrawable(R.drawable.policy_tab_blue);
                            drawable.setCornerRadii(new float[]{10,10,0,0,0,0,10,10}); // this will create the corner radious to left side

                        } else {
                            GradientDrawable drawable = (GradientDrawable) getResources().getDrawable(R.drawable.policy_tab_white);
                            drawable.setCornerRadii(new float[]{0,0,10,10,10,10,0,0}); // this will create the corner radious to right side

                        }
                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                    Log.i("TabPosition:--->", TabPosition + "");
                    Log.i("TabCount:--->", TabCount + "");

                } catch (Exception e) {
                    e.printStackTrace();
                }
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                try {

                } catch (Exception e) {
                    e.printStackTrace();
                }
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
androidandroid-layoutandroid-tablayout
16
ShutterSoul

以下のコードの結果：

enter image description here

次のように4つの形状を使用します（セレクターは必要ありません）：

  1. tab_left_select.xml

    <layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item >
        <shape Android:shape="rectangle">
            <solid Android:color="@color/blue" />
            <corners
                Android:topLeftRadius="8dp"
                Android:bottomLeftRadius="8dp">
            </corners>
        </shape>
    </item>
</layer-list>

  2. tab_left_unselect.xml

    • 上記と同じように、色を変更します。

  3. tab_right_select.xml

    • 上記と同じように、半径方向を右に変更します。

  4. tab_right_unselect.xml

    • 上記と同じように、色と半径の方向を右に変更します。

あなたのレイアウト：

<Android.support.design.widget.TabLayout
        Android:layout_margin="@dimen/activity_vertical_margin"
        Android:id="@+id/tabs"
        app:tabTextColor="@color/white"
        app:tabSelectedTextColor="@color/white"
        app:tabIndicatorColor="#00000000"
        Android:layout_width="match_parent"
        Android:layout_height="40dp" />

アクティビティ/フラグメント：

tabLayout = (TabLayout)view.findViewById(R.id.tabs);
        tabLayout.addTab(tabLayout.newTab().setText("Tab1"));
        tabLayout.addTab(tabLayout.newTab().setText("Tab2"));
        setTabBG(R.drawable.tab_left_select,R.drawable.tab_right_unselect);
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                if(tabLayout.getSelectedTabPosition()==0) {
                    setTabBG(R.drawable.tab_left_select,R.drawable.tab_right_unselect);
                }
                else {
                    setTabBG(R.drawable.tab_left_unselect,R.drawable.tab_right_select);
                }
            }
            ....
        });

private void setTabBG(int tab1, int tab2){
        if (Android.os.Build.VERSION.SDK_INT >= Android.os.Build.VERSION_CODES.JELLY_BEAN_MR1) {
            ViewGroup tabStrip = (ViewGroup) tabLayout.getChildAt(0);
            View tabView1 = tabStrip.getChildAt(0);
            View tabView2 = tabStrip.getChildAt(1);
            if (tabView1 != null) {
                int paddingStart = tabView1.getPaddingStart();
                int paddingTop = tabView1.getPaddingTop();
                int paddingEnd = tabView1.getPaddingEnd();
                int paddingBottom = tabView1.getPaddingBottom();
                ViewCompat.setBackground(tabView1, AppCompatResources.getDrawable(tabView1.getContext(), tab1));
                ViewCompat.setPaddingRelative(tabView1, paddingStart, paddingTop, paddingEnd, paddingBottom);
            }

            if (tabView2 != null) {
                int paddingStart = tabView2.getPaddingStart();
                int paddingTop = tabView2.getPaddingTop();
                int paddingEnd = tabView2.getPaddingEnd();
                int paddingBottom = tabView2.getPaddingBottom();
                ViewCompat.setBackground(tabView2, AppCompatResources.getDrawable(tabView2.getContext(), tab2));
                ViewCompat.setPaddingRelative(tabView2, paddingStart, paddingTop, paddingEnd, paddingBottom);
            }
        }
    }
5
Deven

4形状を使用する必要があると思います：1）左ボタンではありません選択済み2）左ボタンが選択されている3）右ボタンが選択されていない4）右ボタンを選択

次に、ボタンの背景に使用するセレクターを記述します。左側のボタンの例を参照してください（右側も同様です）。

<selector
    xmlns:Android="http://schemas.Android.com/apk/res/Android">

<item Android:state_selected="true">
<shape Android:shape="rectangle">
  <corners
    Android:topRightRadius="10dp"
    Android:bottomLeftRadius="10dp"/>
  <gradient
    Android:startColor="#000"
    Android:endColor="#000"
    Android:gradientRadius="400"
    Android:angle="-270"/>
</shape>
</item>

<item>
    <shape Android:shape="rectangle">
      <gradient
        Android:angle="90"
        Android:startColor="#880f0f10"
        Android:centerColor="#8858585a"
        Android:endColor="#88a9a9a9"/>
   <corners
      Android:topRightRadius="10dp"
      Android:bottomLeftRadius="10dp"/>
</shape>
</item>

詳細については、こちらをご覧ください。 AndroidのTABSの角の丸み

2
Harshad

ここで覚えていないクリエイティブデベロッパーのために、StackOverflowで以前の回答を作成しました。これは、TabLayoutの親ビューとしてカードビューを持つことで簡単に行うことができます。

enter image description here

<com.google.Android.material.tabs.TabLayout
        Android:id="@+id/tableLayout"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/include2"
        app:tabBackground="@drawable/tab_color_selector"
        app:tabIndicatorHeight="0dp"
        app:tabSelectedTextColor="@color/white"
        app:tabTextAppearance="@style/AppTheme.CustomTabText"
        app:tabTextColor="@color/green">

        <com.google.Android.material.tabs.TabItem
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:text="Today’s menu" />

        <com.google.Android.material.tabs.TabItem
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:text="Full Menu" />

        <com.google.Android.material.tabs.TabItem
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:text="Reviews" />

    </com.google.Android.material.tabs.TabLayout>

</androidx.cardview.widget.CardView>
1
Dasser Basyouni

私の答えを共有したいと思います（私の場合は、tabLayoutの上にCardviewを追加して、半径のコーナーを設定します）。

<RelativeLayout xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/main_content_home"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:layout_below="@+id/rlEmpty">

    <androidx.cardview.widget.CardView xmlns:card_view="http://schemas.Android.com/apk/res-auto"
        Android:id="@+id/cvTab"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        card_view:cardCornerRadius="20dp"
        card_view:cardElevation="0dp">

        <com.google.Android.material.tabs.TabLayout
            Android:id="@+id/result_tabs_home"
            style="@style/customTabLayout2"
            Android:layout_width="match_parent"
            Android:layout_height="60dp"
            Android:background="@color/tab_color"
            Android:elevation="0dp"
            app:tabIndicatorColor="@color/tab_indicator"
            app:tabMode="scrollable"
            app:tabTextAppearance="@style/customTabLayout" />
    </androidx.cardview.widget.CardView>

    <androidx.viewpager.widget.ViewPager
        Android:id="@+id/viewpagerhome"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:layout_below="@+id/cvTab" />
</RelativeLayout>
0
Anthony Puitiza

マテリアルデザインでは、MaterialButtonToggleGroupを使用してタブにMaterialButtonsを追加するだけで作成できます。

<com.google.Android.material.button.MaterialButtonToggleGroup
            Android:id="@+id/buttonGroup"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:gravity="center"
            app:checkedButton="@+id/nearest">

            <com.google.Android.material.button.MaterialButton
                Android:id="@+id/nearest"
                Android:layout_width="0dp"
                Android:layout_height="match_parent"
                Android:layout_weight="1"
                Android:text="Nearest" />

            <com.google.Android.material.button.MaterialButton
                Android:id="@+id/alphabetical"
                Android:layout_width="0dp"
                Android:layout_height="match_parent"
                Android:layout_weight="1"
                Android:text="Alphabetical"/>

        </com.google.Android.material.button.MaterialButtonToggleGroup>

詳細については、このリンクを参照してください- https://material.io/develop/Android/components/material-button-toggle-group/

0
Abhishek Kumar

四隅に使った方がいいと思います

 <?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" 
     Android:shape="rectangle"> 
     <gradient 
         Android:startColor="#SomeGradientBeginColor"
         Android:endColor="#SomeGradientEndColor" 
         Android:angle="270"/> 

    <corners 
         Android:bottomRightRadius="7dp" 
         Android:bottomLeftRadius="7dp" 
         Android:topLeftRadius="7dp" 
         Android:topRightRadius="7dp"/> 
</shape>

ボタンまたはレイアウトでこれを使用する方法を確認してください

http://www.techamongus.com/2017/02/Android-layouts-with-round-corners.html

0
Rakesh Singh

MaterialCardViewを適切なcardCornerRadiusとともにラボレイアウトの親レイアウトとして使用できます。この片側の角の丸い背景を実現します。次に、tabIndicatorColorを使用して、選択したタブのレイアウトに色を付けることができます。これがお役に立てば幸いです。ありがとう

コードスピネット：

<com.google.Android.material.card.MaterialCardView
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_margin="10dp"
    app:strokeWidth="2dp"
    app:strokeColor="?attr/colorAccent"
    app:cardCornerRadius="20dp">
    <com.google.Android.material.tabs.TabLayout
        app:tabTextAppearance="@Android:style/TextAppearance.Widget.TabWidget"
        Android:id="@+id/tab_layout"
        app:tabIndicatorGravity="stretch"
        app:tabMaxWidth="0dp"
        app:tabGravity="fill"
        app:tabMode="fixed"
        app:tabIndicatorColor="?attr/colorAccent"
        app:tabSelectedTextColor="@Android:color/white"
        app:tabTextColor="?attr/colorPrimary"
        Android:layout_width="match_parent"
        Android:layout_height="35dp"/>
</com.google.Android.material.card.MaterialCardView>

出力： enter image description here

0
Md. Asaduzzaman