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

1

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

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

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

Теги:
user-interface
google-play
interface

1 ответ

3
Лучший ответ

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

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

 <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);
  • 2
    Ух ты, я понятия не имел, что вы, ребята, были здесь. Получение ответа от парней, которые действительно сделали это, действительно превосходно, как и сам ответ. Я должен поднять тестовую графику и попробовать это. Спасибо за ответ Брайан
  • 0
    Извините за супер поздно следить, но не за что!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню