web-dev-qa-db-ja.com

Android）の図形に上部の境界線を描画する

カスタムプログレスバー（WebViewの下に配置）を作成しています。描画したいのは、WebViewとProgressBarの間に1dp幅の線です。既存のドローアブル、つまりprogress_horizontal.xmlを変更して、次のようなことを試しました。

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

  (...)

  <item>
    <shape Android:shape="line">
      <stroke Android:width="1dp" Android:color="#FF000000" />
    </shape>
  </item>

</layer-list>

ただし、この線は垂直方向の中央に配置されていますが、ドローアブルの上に描画する必要があります。私が思いつくことができる唯一のアイデアは、以下のこの「ハッキー」グラデーションを使用することです。

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

  (...)

  <item>
    <shape>
      <gradient
          Android:startColor="#FF000000"
          Android:centerColor="#00000000"
          Android:centerY="0.01"
          Android:endColor="#00000000"
          Android:angle="270"
      />
    </shape>
  </item>

</layer-list>

layer-listで定義されたドローアブルの上部に位置合わせされた単一の線形を描画する方法について、より良いアイデアがありますか？

androidprogress-barlinebordershape
17
Marek Stój

私もこれを理解しようとしばらく時間を費やしました。うまくいけばもっと良い方法がありますが、これは私が使用した方法であり、これも一種のハックですが、誰かを助ける場合に備えて、共有したいと思いました。

レイヤーリストの最初のアイテムは、境界線にしたい色の単色である必要があります。それに続いて、境界線を配置したい側にパディングを付けて、境界線を設定したいものになります。

例えば：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item>
        <shape Android:shape="rectangle">
            <solid Android:color="YOUR BORDER COLOR" />
        </shape>
    </item>
    <item Android:top="YOUR TOP BORDER THICKNESS">
        THE THING YOU WANT A BORDER ON
    </item>
</layer-list>

アイテムのパディングが背後の立体的な形を明らかにし、ボーダーの外観を与えるという考え方です。境界線を追加するために、任意の側にパディングを追加できます。この方法でも、より複雑になり、さまざまな色の境界線を持つことができると思います。

ハックのように見えますが、それは私にとってはうまくいきました。

編集：私は「パディング」と言いましたが、レイヤーリストではそれはオフセットのようなものです。

47
cottonBallPaws

私はすべての関連トピックを調べていましたが、誰も私の問題を解決できませんでした。しかし、それらのいくつかは、レイヤーリストまたは形状パラメーターがどのように機能するかを理解するのに非常に役立ちました。

私の問題は、線形グラデーションでボタンを定義し、異なる色で上下の線を描くことでした。結局、私はこのソリューションをハッキングしました。ファイルをres/drawable /blue_btn.xmlに保存しました

    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android" >
   <item Android:state_pressed="true" >        
        <shape Android:shape="rectangle">
            <solid Android:color="@color/blue_end" />
            <padding 
                   Android:left="10dp"
                Android:top="10dp"
                Android:right="10dp"
                Android:bottom="10dp" />
            <stroke   
                Android:width="1dp"
                Android:color="@color/bottomline_btn" />                        
        </shape>    
    </item>
    <item>
        <layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
           <item>
                <shape Android:shape="rectangle">
                    <solid Android:color="@color/blue" />
                    <gradient
                        Android:startColor="@color/blue"
                        Android:endColor="@color/blue_end"
                        Android:angle="270" />
                </shape>
            </item>
            <item Android:top="0dp" Android:bottom="-1dp" Android:left="-1dp" Android:right="-1dp">
                <shape Android:shape="rectangle">
                    <stroke   
                        Android:width="1dp"
                        Android:color="@color/topline_btn" />                       
                    <solid Android:color="#00000000" />
                    <corners Android:radius="0dp" />
                </shape>
            </item>
            <item Android:top="-1dp" Android:bottom="0dp" Android:left="-1dp" Android:right="-1dp">
                <shape Android:shape="rectangle">
                    <stroke   
                        Android:width="1dp"
                        Android:color="@color/bottomline_btn" />                        
                    <solid Android:color="#00000000" />
                    <corners Android:radius="0dp" />
                </shape>
            </item>         
        </layer-list>
    </item>  
</selector>


<color name="topline_btn">#31ffffff</color>
<color name="bottomline_btn">#31000000</color>

<color name="blue">#449def</color>
<color name="blue_end">#2f6699</color>
12
Şükriye

このようなもので相殺してみましたか

http://Android.amberfog.com/?p=9

1
Bo.

私の解決策は、最後のレイヤーアイテムとして9パッチを追加することです：

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <item>
        <shape>
            <solid Android:color="@color/tab_button_active_layer2" />
        </shape>
    </item>
    <item Android:bottom="@dimen/tab_button_active_bottom_bar_width">
        <shape>
            <solid Android:color="@color/tab_button_active_layer1" />
        </shape>
    </item>
    <!-- 9-patch drawable -->
    <item Android:drawable="@drawable/tab_button_border_top"/>
</layer-list>
0
Mickey Tin