Q

Android中的TABS圆角

2011-12-22 95 views 2 likes

2

我想实现我在应用程序中构建的选项卡的圆角。到目前为止，我能够拿出这个 enter image description here Android中的TABS圆角

我想我的圆角看起来如此。（我编写它只有左，右角落出现这样一种方式，但是当状态改变时它看起来像上面的图片） enter image description here

下面是我到目前为止已经编写的代码。我如何通过代码实现适当的圆角？

SELECTED TAB.XML

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle" 
> 
<corners 
    android:topRightRadius="10dp" 
    android:bottomLeftRadius="10dp"/> 

<gradient 
    android:startColor="#000" 
    android:endColor="#000" 
    android:gradientRadius="400" 
    android:angle="-270"/> 

</shape>

未选择TAB.XML

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle" 
> 
<gradient 
android:angle="90" 
android:startColor="#880f0f10" 
android:centerColor="#8858585a" 
android:endColor="#88a9a9a9"/> 

<corners 
    android:topLeftRadius="10dp" 
    android:bottomRightRadius="10dp"/> 

</shape>

感谢您的答复！ :)

2011-12-22 Vinoth

+0

五月这篇文章对您有所帮助几分：http://joshclemm.com/blog /？p = 136 – 2011-12-22 05:31:11

+0

@Vinoth你有没有得到解决方案？ – ShutterSoul 2016-02-11 10:25:51

+0

@Vinoth你能为这个问题找到一个真正的解决方案吗？ – moxi 2017-12-07 05:37:29

A

回答

2

我认为你应该使用4种形状：

不选择
选定
右左键左键未选中按钮
右按钮选择

，然后写选择用于button背景，见范例左侧的按键（右边只是类似）：

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

<item android:state_selected="true"> 
<shape android:shape="rectangle"> 
    <corners 
    android:topLeftRadius="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:topLeftRadius="10dp" 
     android:bottomLeftRadius="10dp"/> 
</shape> 
</item></selector>

2011-12-22 08:18:50

0

另一种完全不同的方法可能是使用库如Appcelerator Titanium或PhoneGap。

这两个库都可让您在HTML5/CSS/Javascript中“编程”您的android。凡“圆形标签”比比皆是。

只是一个想法...

2011-12-22 05:30:21 paulsm4

4

在java中的文件，把这

tabs.getTabWidget().getChildAt(0).setBackgroundResource(R.drawable.roundedcorners);

roundedcorners.xml：

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="rectangle"> 
    <corners android:bottomLeftRadius="0dp" 
     android:bottomRightRadius="0dp" 
     android:topLeftRadius="5dp" 
     android:topRightRadius="5dp" /> 
</shape>

2011-12-22 08:20:01 selvaiyyamperumal

3

创建替代形状来解决问题

注意：这些XML文件是除了提到的两个。

所选标签ALTERNATE.XML

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle" 
> 
<corners 
android:topLeftRadius="10dp" 
android:bottomRightRadius="10dp"/> 

<gradient 
    android:startColor="#000" 
    android:endColor="#000" 
    android:gradientRadius="400" 
    android:angle="-270"/> 

</shape>

未选择TAB切换。XML

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle" 
> 
<gradient 
android:angle="90" 
android:startColor="#880f0f10" 
android:centerColor="#8858585a" 
android:endColor="#88a9a9a9"/> 

<corners 
    android:topRightRadius="10dp" 
    android:bottomLeftRadius="10dp"/> 

</shape>

然后，将其添加到选项卡选择侦听器中。

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

      viewPager.setCurrentItem(tab.getPosition()); 

      int selectedTabPosition = tab.getPosition(); 


      View firstTab = ((ViewGroup) tabLayout.getChildAt(0)).getChildAt(0); 
      View secondTab = ((ViewGroup) tabLayout.getChildAt(0)).getChildAt(1); 


      if (selectedTabPosition == 0) 
      { // that means first tab 
       firstTab.setBackground(getDrawable(R.drawable.selected_tab)); 
       secondTab.setBackground(getDrawable(R.drawable.unselected_tab)); 


      } else if (selectedTabPosition == 1) 
      { // that means it's a last tab 

       firstTab.setBackground(getDrawable(R.drawable.selected_tab_alternate)); 
       secondTab.setBackground(getDrawable(R.drawable.unselected_tab_alternate)); 


      } 
     }

2016-05-19 12:09:42

0

该代码是用于tablayout 2个标签：

之一被选择和两个是未选择的模式

绘制对象的xml：

当选择左标签：

tabselectionleft：

<?xml version="1.0" encoding="utf-8"?> 
<shape android:shape="rectangle" 
    xmlns:android="http://schemas.android.com/apk/res/android"> 
      <corners android:bottomLeftRadius="5dp" 
       android:topLeftRadius="5dp"/> 

    <solid android:color="@android:color/white"/> 

</shape>

notabselectionleft：

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

    <item > 

     <shape android:shape="rectangle" 
      xmlns:android="http://schemas.android.com/apk/res/android"> 
      <gradient android:startColor="@color/colorAccent1" android:endColor="@color/colorAccent3"/> 

      <corners android:topRightRadius="5dp" 
       android:bottomRightRadius="5dp" /> 
     </shape> 
    </item> 


</layer-list>

当选择右标签：

tabselectionright：

<?xml version="1.0" encoding="utf-8"?> 
<shape android:shape="rectangle" 
    xmlns:android="http://schemas.android.com/apk/res/android"> 
    <corners android:bottomRightRadius="5dp" 
     android:topRightRadius="5dp"/> 
    <solid android:color="@android:color/white"/> 

</shape>

notabselectionright：

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

     <shape xmlns:android="http://schemas.android.com/apk/res/android" 
      android:shape="rectangle" 
      android:useLevel="true"> 


      <corners 
       android:bottomLeftRadius="5dp" 
       android:topLeftRadius="5dp" /> 
      <gradient 
       android:endColor="@color/colorAccent3" 
       android:startColor="@color/colorAccent1" /> 


     </shape> 


    </item>

在主要布局tablayout decelartion

<android.support.design.widget.TabLayout 
    android:id="@+id/tabs" 
    android:layout_width="match_parent" 
    android:layout_height="60dp" 
    app:tabMode="fixed" 
    app:tabGravity="fill" 
    android:fitsSystemWindows="true" 
    android:clickable="true" 
    app:tabIndicatorColor="@color/colorAccent2" 
    app:tabIndicatorHeight="3dp" 
    android:layout_marginTop="20dp" 
    android:layout_marginLeft="20dp" 
    android:layout_marginRight="20dp" 
    app:tabPaddingStart="10dp" 
    app:tabPaddingEnd="10dp" 
    android:clipToPadding="true" 
    android:clipChildren="true" 
    />

调用此绘制应该编程发生如下图所示：

protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_simple_tabs); 
viewPager = (ViewPager) findViewById(R.id.viewpager); 
     setupViewPager(viewPager); 

     tabLayout = (TabLayout) findViewById(R.id.tabs); 
     tabLayout.setupWithViewPager(viewPager); 
     firstTab = ((ViewGroup) tabLayout.getChildAt(0)).getChildAt(0); 
     secondTab = ((ViewGroup) tabLayout.getChildAt(0)).getChildAt(1); 
     tabLayout.setOnTabSelectedListener(this); 

     firstTab.setBackground(getDrawable(R.drawable.tabselectionleft)); 

     secondTab.setBackground(getDrawable(R.drawable.notabselectionleft)); 



    } 
public void onTabSelected(TabLayout.Tab tab) { 

     viewPager.setCurrentItem(tab.getPosition()); 

     int selectedTabPosition = tab.getPosition(); 

     if (selectedTabPosition == 0) 
     { // that means first tab 
      firstTab.setBackground(getDrawable(R.drawable.tabselectionleft)); 
        secondTab.setBackground(getDrawable(R.drawable.notabselectionleft)); 


     } else if (selectedTabPosition == 1) 
     { // that means it's a last tab 

      firstTab.setBackground(getDrawable(R.drawable.notabselectionright)); 
      secondTab.setBackground(getDrawable(R.drawable.tabselectionright)); 


     }

2017-05-11 09:04:26

0

我觉得这可以用一个可绘制完成了一个视图。对于2选项卡只需要2个drawable。这也适用于边框颜色的标签。

对于左标签：

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

    <item android:state_selected="false"> 
    <layer-list > 

     <item> 
     <shape android:shape="rectangle" > 
      <solid android:color="@android:color/holo_red_dark" /> 

      <corners android:radius="10dp"/> 
     </shape> 

     </item> 

     <item android:right="-10dp"> 
     <shape> 
      <solid android:color="@android:color/holo_red_dark" /> 
      <stroke 
       android:width="2dp" 
       android:color="@android:color/black" /> 

      <corners android:radius="10dp"/> 
     </shape> 
     </item> 

    </layer-list> 
    </item> 

    <item android:state_selected="true"> 
    <layer-list > 

     <item > 
     <shape android:shape="rectangle" > 
      <solid android:color="@android:color/holo_green_dark" /> 

      <corners android:radius="10dp"/> 
     </shape> 

     </item> 

     <item android:right="-10dp"> 
     <shape> 
      <solid android:color="@android:color/holo_green_dark" /> 
      <stroke 
       android:width="2dp" 
       android:color="@android:color/black" /> 
      <corners android:radius="10dp"/> 
     </shape> 
     </item> 

    </layer-list> 

    </item> 

</selector>

左标签背景预览：

对于右标签：

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

<item android:state_selected="false"> 
    <layer-list > 
     <item> 
     <shape android:shape="rectangle" > 
      <solid android:color="@android:color/holo_red_dark" /> 

      <corners android:radius="10dp"/> 
     </shape> 

     </item> 

     <item android:left="-10dp"> 
     <shape> 
      <solid android:color="@android:color/holo_red_dark" /> 
      <stroke 
       android:width="2dp" 
       android:color="@android:color/black" /> 

      <corners android:radius="10dp"/> 
     </shape> 
     </item> 

    </layer-list> 

</item> 
<item android:state_selected="true"> 
    <layer-list > 
     <item > 
     <shape android:shape="rectangle" > 
      <solid android:color="@android:color/holo_green_dark" /> 

      <corners android:radius="10dp"/> 
     </shape> 

     </item> 

     <item android:left="-10dp"> 
     <shape> 
      <solid android:color="@android:color/holo_green_dark" /> 
      <stroke 
       android:width="2dp" 
       android:color="@android:color/black" /> 
      <corners android:radius="10dp"/> 
     </shape> 
     </item> 

    </layer-list> 

</item> 


</selector>

右标签背景预览：

如果存在多于2标签那么这个如果对于中间标签：

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

<item android:state_selected="false"> 

    <layer-list > 

    <item> 
     <shape android:shape="rectangle" > 
      <solid android:color="@android:color/holo_red_dark" /> 

      <corners android:radius="10dp"/> 
     </shape> 

    </item> 

    <item android:left="-10dp" android:right="-10dp"> 
     <shape> 
      <solid android:color="@android:color/holo_red_dark" /> 
      <stroke 
       android:width="2dp" 
       android:color="@android:color/black" /> 

      <corners android:radius="10dp"/> 
     </shape> 
    </item> 

    </layer-list> 

</item> 
<item android:state_selected="true"> 

    <layer-list > 

    <item > 
     <shape android:shape="rectangle" > 
      <solid android:color="@android:color/holo_green_dark" /> 

      <corners android:radius="10dp"/> 
     </shape> 

    </item> 

    <item android:left="-10dp" android:right="-10dp"> 
     <shape> 
      <solid android:color="@android:color/holo_green_dark" /> 
      <stroke 
       android:width="2dp" 
       android:color="@android:color/black" /> 
      <corners android:radius="10dp"/> 
     </shape> 
    </item> 

    </layer-list> 

</item> 

</selector>

中间卡背景前瞻：

可绘有两个选择和未选中状态

2018-02-22 10:12:02

相关问题

1. Android：丑陋的TABS在2.0 vs 1.5 ...为什么？我的圆角TABS在哪里？
2. Android圆形转角不圆
3. 的Android的ListView圆角
4. 对话框中的Android圆角布局
5. Android Tabs Layout
6. Android Tabs with TableLayout
7. Android marketplace like tabs
8. Android Tabs问题
9. Android Tabs问题
10. Android：给一个webview圆角？
11. Android图像模糊圆角
12. android自定义searchView圆角
13. 圆角中的UIImageView
14. 表中的圆角
15. IE中的圆角
16. 表中的圆角
17. CardView：图像的边角在Android 4.3中不是圆角的？
18. 圆角DataGrid角？
19. Android的XML圆润剪切的边角
20. Android滚动到Tabs
21. 圆角在IE中不是圆整的
22. Android上列表项的圆角？
23. Android可绘制的圆角dyanamically
24. Android：如何绘制圆角的线条？
25. Android位图上的圆底角？
26. 带有片段的Android TABS
27. 的JTextArea圆角
28. NSTableView的圆角
29. 圆角的UIBarButtonItems
30. UITableView的圆角