2

画像とテキスト (図の 2 つの大きなボックス) を含む 10 個の垂直タイルがある Android アプリの UI を設計する必要があり、タイルをクリックすると消えて、6 つの要素を含むスクロール可能なグリッドビューに置き換えられます (図を参照)。下図中央）を同ページに掲載。（アニメーションで表示）

これは、説明しようとしているビューのスナップショットです。この画像は 10 個のタイルのうち 2 個のみを示しており、クリックするとグリッドビューが表示されます。それぞれの白いボックスには画像とテキストが含まれています。私は設計が苦手なので、これを実装する詳細な回答をいただければ幸いです。ありがとう。 ここに画像の説明を入力

4

1 に答える 1

2

あなたの質問にはあまり詳細はありません。写真でもすべてを明確にするわけではありませんが、ここでそれを突き刺します。

タイルがさらに「拡大する」と言うのが何を意味するのかわかりませんが、その時点で中央の 6 つのタイルが表示されることを期待していますか、それとも常にそこにあるのでしょうか? それらが表示される場合、それはアニメ化されますか?

あなたが持っている絵を実現するには、おそらくRelativeLayoutトップレベルで取得する必要があります。これは、この日付TextViewが右上にあり、ハンドルがSlidingDrawer下部にあるためです。その RelativeLayout の背景を壁紙のテーマで設定できます。それが静的な場合は、一番上の青いバーだと思います。

次に、この最上位の RelativeLayout 内LinearLayoutに、水平方向の があります。これには、写真の 3 つの「窓」が含まれます。

その水平 LinearLayout では、最初に垂直方向の別の LinearLayout があり、次に ViewPager があり、次に最初のものと同様の別の垂直 LinearLayout があります (右側の部分が左側の部分とどのように異なるのか、または完全なミラーであると想定されているかどうかはわかりません) ... ?)。

要約すると：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:id="@+id/top_level"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent">

    <TextView
        android:id="@+id/date_text"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:paddingTop="..." // fill in some space to offset from the top of the screen
        android:paddingRight="..." // same thing to keep it off the right edge
        />
    <LinearLayout
        android:layout_height="..." // set the height of your content in the center of your screen
        android:layout_width="fill_parent"
        android:layout_below="@+id/date_text"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_height="fill_parent"
            android:layout_width="wrap_content"
            android:orientation="vertical" >

            < add here some of the stuff you have above your tile like that RSS icon and so on />
            <ListView
                android:id="@+id/tile_list"
                android:layout_height="fill_parent"
                android:layout_width="fill_parent"/>
        </LinearLayout>

        <ViewPager
            android:id="@+id/pager"
            android:layout_height="fill_parent"
            android:layout_width="0dp"
            android:layout_weight="1" // so that will fill the remaining space between the left and the right parts
            />

        <LinearLayout
            android:layout_height="fill_parent"
            android:layout_width="wrap_content"
            android:orientation="vertical" >

            < add here some of the stuff you have above your tile like that RSS icon and so on />
            <ListView
                android:id="@+id/tile_list"
                android:layout_height="fill_parent"
                android:layout_width="fill_parent"/>
        </LinearLayout>

    </LinearLayout>

    <SlidingDrawer
        android:id="@+id/drawer"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:handle="@+id/drawer_handle"
        android:content="@+id/drawer_contents">

        <ImageView
            android:id="@+id/drawer_handle"
            android:src="@drawable/image for the tab..."
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">
        </ImageView>

        <Another Layout for the content of the drawer
            android:id="@+id/drawer_contents"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
        >
            ....
        </Close that layout>

    </SlidingDrawer>

</RelativeLayout>

そこから、埋めなければならないことがまだかなりあり、タイルのリスト (左右) を埋め、ユーザーがアイテムをクリックしたときに処理し、ViewPager のコンテンツを表示するために記述するコードがいくつかあります。画面の真ん中。おそらく、そこにある各ページで GridLayout を使用したいと思うでしょう。

ユーザーがタイルをクリックするまで ViewPager を非表示にする必要がある場合は、可視性を非表示に設定し、コードで変更できます。

更新 これがどのように動くかについての詳細情報があります......

では、トップ レベルの RelativeLayout を日付とともに保持し、SlidingDrawer を下部に保持します。

真ん中の部分では、この人がまとめた Horizo​​ntalListView を使用できます: Android で水平な ListView を作成するにはどうすればよいですか? 、コードと手順と例はここにあります: http://www.dev-smart.com/archives/34

次に、独自のアダプタを作成して、そのリストに入力する必要があります。BaseAdapter に基づくことができます (その決定は、画像/情報の保存方法に依存します)。

そのアダプタの getView 関数では、折りたたまれたビューと展開されたビューの両方が 1 つの FrameLayout に結合されたレイアウトを持つことができますが、一度に表示されるのは 1 つだけです。次のようになります。

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="fill_parent" // assuming the HorizontalListView is set with the right height
    >

    <LinearLayout
        android:id="@+id/collapsed_view"
        android:layout_height="fill_parent"
        android:layout_width="wrap_content"
        android:orientation="vertical" >

        < add here some of the stuff you have above your tile like that RSS icon and so on />
     </LinearLayout>

    <ViewPager
        android:id="@+id/expanded_view"
        android:layout_height="fill_parent"
        android:layout_width="0dp"
        android:layout_weight="1" // so that will fill the remaining space between the left and the right parts
        android:visibility="gone"
        />

</FrameLayout>

リスト アダプターでは、さまざまなビューに適切なタグを設定する必要があります。これにより、ユーザーが 1 つの画像をクリックしたときに、どの画像がクリックされたかがわかります。1 つのビューを展開するには、LinearLayout の表示を非表示に変更し、ViewPager の表示を表示に変更します。

一度に 1 つだけ展開する必要がある場合は、アダプターに状態変数を設定して、それがどれであるかを示し、リスト内のすべてのビューの可視性プロパティを正しく設定できます。次に、ListView で invalidate を呼び出して更新します。

これらすべてを行うにはかなりのコードを書く必要がありますが、整理しておけば、それほど悪くはありません....

于 2012-08-23T06:33:19.677 に答える