Android - Как создать пользовательский интерфейс, как маркет или Shopsavvy

Question

в последнее время на андроид маркете и шопсвве прошла капитальный ремонт пользовательского интерфейса. В результате список, кажется, скользит под изогнутой верхней областью с кнопками на нем. Верхняя часть, кажется, слегка отбрасывает тени в списке, а сам список имеет другой цветной заголовок по отношению к остальной части списка. Это действительно большое улучшение внешнего вида пользовательского интерфейса Android, гораздо более профессионально выглядящее.

Так, как достигается скольжение под изогнутой верхней частью с тенью?

спасибо, ребята

Answer 1

Была отличная запись в блоге разработчиков, которая сделала приложение для рынка, и вы можете найти его здесь http://www.pushing -pixels.org / 2010/12/13 / meet-the-green-goblin-part -1.html

В shopavvy мы выбрали более простой подход и достигли в целом тех же результатов. Мы используем макет кадра с двумя вложенными макетами, которые перекрывают друг друга. Верхний макет имеет в качестве фона пользовательское изображение, включающее тень (у нас потрясающий графический дизайнер). Нижний макет представляет собой просто представление списка с полем сверху, чтобы разместить его там, где мы хотим. Псевдокод для этого выглядит следующим образом.

 <FrameLayout>
    <!-- Listview that sits under another view -->
    <LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

         <ListView
           android:id="@+id/backgroundlist"
           android:layout_marginTop="150dp"
           android:layout_height="fill_parent"
           android:layout_width="fill_parent" />

     </LinearLayout>

     <!-- view that sits on top -->
     <LinearLayout
       android:layout_height="wrap_content"
       android:layout_width="fill_parent"
       android:background="@drawable/curvedimage"
       android:orientation="vertical"
      >
        <!-- headers, buttons and other stuff -->
        <LinearLayout
          .....

     </LinearLayout>
</FrameLayout>

Для заголовка в просмотре списка вы просто используете функцию addHeaderView в просмотре списка. Вы просто делаете макет для заголовка, который вы хотите. В нашем случае мы просто используем текстовое представление с другим цветом фона.

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

    android:text="@string/scans_right_now"
    android:layout_height="61dp"
    android:layout_width="fill_parent"
    android:gravity="bottom|center_horizontal"

    android:paddingBottom="3dp"

    android:textColor="#8b8b8b"
    android:background="#d3d3d3"
    android:textStyle="bold"

    android:shadowColor="#FFFFFF" 
    android:shadowDx="0.0"
    android:shadowDy="1.0"
    android:shadowRadius="1.0" />

и затем добавьте это представление в качестве заголовка в вашу деятельность следующим образом:

ListView list = (ListView) findViewById(R.id.backgroundlist);
View recentScansHeader =        getLayoutInflater().inflate(R.layout.recent_products_header, recentViewList, false);
list.addHeaderView(recentScansHeader);