2017-08-17 154 views
2

我無法使用漸變來擴大中心顏色的寬度。
的目標是:
enter image description here
較大的中心有一些顏色,兩側透明。安卓使用漸變來放大中心顏色

用法:

<ImageView 
    android:layout_width="match_parent" 
    android:layout_height="5dp" 
    android:src="@drawable/gradient_normal"/> 

我試了很多組合,帶layer-list,但結果不是很好。一種解決方案可以將佈局劃分爲50%-50%,並設置從左到右的第一個漸變(從透明到顏色),第二個從右向左(從顏色到透明),但這種解決方案對我來說似乎非常複雜。例如,generator不能放大中心的黃色。 (有Android XML代碼生成器。)

任何更簡單的解決方案?謝謝。

API21 +

+0

無深入研究梯度定義(這將更加合適),您是否考慮過1線高9片png,邊上有漸變和透明中心?再加上後來的Android API上的「tint color」(我認爲tint在19+左右可靠地工作(在95%以上的設備上)),你就可以生成任何顏色組合。關於適當的漸變可繪製:也許你應該發佈一些佈局的核心框架,以便更好地猜測將其改爲約束佈局(例如,將背景添加到列表中)有多困難。還警告如果你不想使用例如約束佈局。 – Ped7g

+0

使用'ShapeDrawable.ShaderFactory'並從'resize(int width,int height)'方法返回'LinearGradient' – pskink

+0

您試過我發佈的答案嗎?讓我知道,如果這不是你想到的解決方案 –

回答

2

我希望這是你的想法。我正在使用layer-list。我已經使用"@color/colorAccent"兩端。將其更改爲"#0FFF"以獲得問題中所需的透明顏色。

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item 
     android:left="50dp"> 
     <shape android:shape="rectangle"> 
      <gradient 
       android:startColor="@color/colorPrimary" 
       android:endColor="@color/colorAccent" 
       android:centerColor="@color/colorPrimary" 
       android:centerX="10%"/> 
      <size 
       android:height="100dp" 
       android:width="50dp"/> 
     </shape> 
    </item> 
    <item 
     android:right="50dp"> 
     <shape android:shape="rectangle"> 
      <gradient 
       android:startColor="@color/colorAccent" 
       android:endColor="@color/colorPrimary" 
       android:centerColor="@color/colorPrimary" 
       android:centerX="80%"/> 
      <size 
       android:height="100dp" 
       android:width="50dp"/> 
     </shape> 
    </item> 
</layer-list> 

android:centerX屬性,直到你玩得到你想要的。

輸出

這是繪製預覽會變成什麼樣子的centerX在10%和80%

enter image description here

現在的centerX

在60%和40%

enter image description here

編輯

爲了得到在使用match_parent作爲layout_width參數的佈局同樣的效果,分裂梯度成兩個可繪製,並將其設置爲背景2不同ImageViewsFrameLayouts

left_gradient.xml

<shape android:shape="rectangle" 
    xmlns:android="http://schemas.android.com/apk/res/android"> 
    <gradient 
     android:startColor="#0FFF" 
     android:centerColor="#000" 
     android:centerX="50%" 
     android:endColor="#000"/> 
</shape> 

right_gradient。XML

<shape android:shape="rectangle" 
    xmlns:android="http://schemas.android.com/apk/res/android"> 
    <gradient 
     android:startColor="#000" 
     android:centerColor="#000" 
     android:centerX="50%" 
     android:endColor="#0FFF"/> 
</shape> 

在佈局xml文件

<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="15dp" 
    android:baselineAligned="false"> 
    <FrameLayout 
     android:layout_width="0dp" 
     android:background="@drawable/left_gradient" 
     android:layout_height="match_parent" 
     android:layout_weight="1"/> 
    <FrameLayout 
     android:layout_width="0dp" 
     android:background="@drawable/right_gradient" 
     android:layout_height="match_parent" 
     android:layout_weight="1"/> 
</LinearLayout> 

就像與之前的情況下,在這兩個梯度的文件android:centerX值調整各地得到期望的結果

+0

謝謝你的帖子。我想要整個'layer-list''match_parent'的寬度。我在'ImageView'中使用'layer-list',其中'android:layout_width =「match_parent」'和'android:layout_height =「5dp」' – t0m

+0

@ t0m我更新了我的答案以滿足您的需要。如果這不起作用,請回我一下 –

+0

謝謝。我上面寫了關於相同的解決方案:「一個解決方案可以將佈局分爲50%-50%,並設置從左到右的第一個漸變(從透明到顏色),第二個從右向左(從顏色到透明)」。我接受你的答案爲好的示例代碼。 – t0m