web-dev-qa-db-ja.com

Androidフラグメント間のシャドウセパレータ

ICSタブレット向けGmailアプリ(左側がListFragment、右側がコンテンツ))に似たレイアウトで、そのようなレイアウトを作成するにはどうすればよいのか迷っていました2つのフラグメントの間にシャドウセパレータがあること(Gmailアプリのように、以下に示します)

Just look at that beautiful shadow!

また、これはこの質問に当てはまるので、アクティブリストアイテムのレイアウトにその素敵な三角形/矢印マーカーをどのように配置できますか?これを実装するには、ListView自体が  影の「レイヤー」ですが、それを作成する方法がわかりません。

37
roboguy12

(このトピックに関する情報が不足しているように思われるため)すべての人に知らせるために、これは個々のリスト行のビューのバックグラウンドセレクターXML内で行われます。たとえば、これはメイン画面のレイアウトです。

<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:id="@+id/list_row"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:orientation="vertical"
    Android:background="@drawable/list_item_selector">

    ...<!-- Rest of layout goes here -->

</RelativeLayout>

しかし、魔法はlist_item_selector

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_pressed="true" Android:drawable="@drawable/list_pressed" />
    <item Android:state_activated="true" Android:drawable="@drawable/list_arrow_activated"  />
    <item Android:drawable="@drawable/list_default" />
</selector>

これらをこのように9パッチのドローアブルとして定義することで、各リストアイテムに中央のその行のシャドウの幅に相当する幅を与えることができ、アクティブにすると、そのシャドウのセグメントが矢印に置き換えられます。それが私を助けてくれるので、これが誰かを助けることを願っています!

34
roboguy12

私はあなたがやろうとしているのと同じことをしたいと思っています。 1つのフラグメントが別のフラグメントより「近い」という効果を作成します。

Roboguyの答えは、リスト項目に白い矢印の「セレクター」を配置する方法を処理します。シャドウについては、より具体的に説明します。 バックグラウンドセレクターの別の良い使用例は、Googleのソースコードで見ることができますIO 2011 App。ソースを取得したら、fragment_dashboardを見てください。 xmlアイコンセレクター。

シャドウセパレーターはグラデーションで、ビューの左側に適用されます。 2つの部分があります。

まず、「シャドウ」自体:

res/shadow_left.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
<gradient
    Android:angle="0"
    Android:startColor="#55000000" 
    Android:endColor="#00000000"
    />
</shape>

次に、実際にレイアウトに適用するには:

レイアウト/ my_lower_layer

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent" >
<View
    Android:layout_width="20dp"
    Android:layout_height="fill_parent"
    Android:background="@drawable/fragment_shadow_left" />
<ImageView
    Android:id="@+id/imageview"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_centerInParent="true" />
</RelativeLayout>

これは(私の知る限り)相対レイアウトで行う必要があります。線形レイアウトを使用している場合は、linearLayout全体を相対レイアウト内にラップしてから、グラデーション付きのを追加できます。

これを行う場合、グラデーション<View><LinearLayout>の下に移動する必要があることに注意してください。それ以外の場合、グラデーションは線形レイアウトの下に描画されるため、表示されません。

22
Eagle