안드로이드 대시 보드 패턴

Question

Tim Bray의 최신 안드로이드 blog post 그는 "대시 보드"UI 패턴 (트위터 응용 프로그램, Facebook 응용 프로그램 등에 사용되는 것)을 언급합니다.이 레이아웃은 Button이있는 GridView처럼 간단합니까? 아니면 다른 것입니까?

업데이트 :

DashboardLayout 로마 Nurik 지난 밤에 발표되었다 그것은 구글 IO 2010 응용 프로그램에서 사용되는 레이아웃의 파생

Answer 1

가장 좋은 예는 Google I/O 2011 Android 앱에서 사용할 수 있습니다. 그들은 모든 디자인 패턴을 앱에 구현합니다. 다음 링크에서 코드를 찾을 수 있습니다

http://code.google.com/p/iosched/source/browse/android/res/layout/fragment_dashboard.xml?r=27a82ff10b436da5914a3961df245ff8f66b6252

2011 버전은 전화 ​​및 태블릿 특정 레이아웃에서 공유됩니다 조각에 'DashboardLayout'라는 사용자 지정 레이아웃을 사용합니다. DashboardLayout의 논리는 모든 자동 레이아웃 마법을 담당합니다!

Answer 2

그것은 테이블로 구현 될 수있다.. Image- 및 TextViews가 포함 된 레이아웃.

Answer 3

상대 레이아웃을 사용하여 비슷한 대시 보드를 얻을 수있었습니다. 여전히 진행중인 작업이므로 마일리지가 다를 수 있습니다.

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/lay_wrapper" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" > 
    <LinearLayout android:id="@+id/lay_action" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:background="#000000" > 
     <TextView android:id="@+id/label_header" 
      android:layout_width="wrap_content" 
      android:layout_height="50px" 

      android:text="@string/app_title" 
      android:textColor="#000000" 
      android:textSize="25sp" 
      android:paddingLeft="10px" 
      android:gravity="center_vertical" 
      android:layout_gravity="center_vertical" 
      /> 
    </LinearLayout> 
    <RelativeLayout android:id="@+id/lay_main" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_below="@id/lay_action" 
     android:paddingTop="25px" 
     android:layout_centerInParent="true"> 

     <Button android:id="@+id/button1" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="@string/button1" 
      android:padding="25dip" 
      android:drawableTop="@drawable/button1" /> 

     <Button android:id="@+id/button2" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_toRightOf="@id/button1" 
      android:text="@string/button2" 
      android:padding="25dip" 
      android:drawableTop="@drawable/button2" /> 

     <Button android:id="@+id/button3" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_below="@id/button1" 
      android:text="@string/button3" 
      android:padding="25dip" 
      android:drawableTop="@drawable/button3" /> 

     <Button android:id="@+id/button4" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_toRightOf="@id/button3" 
      android:layout_below="@id/button2" 
      android:text="@string/button4" 
      android:padding="25dip" 
      android:drawableTop="@drawable/button4" /> 
    </RelativeLayout> 
</RelativeLayout> 

Answer 4

romannurik 최근에 올린 사용자 ViewGroup이 작업을 수행했습니다. 코드는 here입니다.

Answer 5

IO 2010 앱의 DashboardLayout 코드는 다소 버그가있었습니다. 그러나 Roman Nurik은 그것을 고쳤으며 이제는 앱에서 DashboardLayout을 쉽게 사용할 수 있습니다.

하우투 :

1. 그냥 like here 유사한 DashboardLayout 내부 버튼의 부부를 드롭, 프로젝트 레이아웃에서
2. 에 this class를 추가합니다.

Answer 6

이 링크가 유용 할 수도 있습니다. 블로그에 첨부 된 샘플 소스 코드를 확인하십시오.

http://blahti.wordpress.com/2011/03/14/build-dashboard-ui-for-android/

Answer 7

최고의 대시 보드를 만드는 가장 간단한 방법 ..

은 아주 멋지게 따라서 내가 레이아웃을 제안, 대시 보드 레이아웃이 나를 위해 작동하지 않았다

How To Build A Dashboard User Interface In Android

Answer 8

설명 기반 솔루션입니다. 레이아웃 내의 여러 레이아웃 일뿐입니다.

키는 간격 레이아웃과 콘텐츠 레이아웃 간의 가중치의 상대성을 나타냅니다.

아이콘을 이동하고 더 크거나 더 가벼운 대시 보드의 다른 레이아웃을 정의 할 수 있습니다.

그리고 여기에 XML입니다 : 여기

이 같은 모습입니다이 사람을 도움이

<resources> 
<style name="dashboard_space_vertical"> 
    <item name="android:layout_width">fill_parent</item> 
    <item name="android:layout_height">0px</item> 
    <item name="android:layout_weight">1</item> 
</style> 

<style name="dashboard_content_vertical"> 
    <item name="android:layout_width">fill_parent</item> 
    <item name="android:layout_height">0px</item> 
    <item name="android:layout_weight">3</item> 
    <item name="android:layout_gravity">center</item> 
</style> 

<style name="dashboard_space_horizontal"> 
    <item name="android:layout_width">0px</item> 
    <item name="android:layout_height">fill_parent</item> 
    <item name="android:layout_weight">2</item> 
    <!-- <item name="android:background">@color/black</item> --> 
</style> 

<style name="dashboard_content_horizontal"> 
    <item name="android:layout_width">0px</item> 
    <item name="android:layout_height">fill_parent</item> 
    <item name="android:layout_weight">3</item> 
    <item name="android:orientation">vertical</item> 
    <item name="android:layout_gravity">center</item> 
    <item name="android:gravity">center</item> 
</style> 

<style name="dashboard_imageview"> 
    <item name="android:layout_width">fill_parent</item> 
    <item name="android:layout_height">fill_parent</item> 
    <item name="android:layout_weight">1</item> 
    <item name="android:scaleType">fitCenter</item> 
</style> 

<style name="dashboard_textview"> 
    <item name="android:layout_width">fill_parent</item> 
    <item name="android:layout_height">wrap_content</item> 
    <item name="android:gravity">center</item> 
    <item name="android:textSize">@dimen/dashboard_thumbnail_text_size</item> 
    <item name="android:textStyle">bold</item> 
    <item name="android:textColor">@color/blue</item> 
</style> 
</resources> 

희망 : 여기

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/dashboard" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:orientation="vertical" > 

    <FrameLayout style="@style/dashboard_space_vertical" /> 

    <LinearLayout style="@style/dashboard_content_vertical" > 

     <FrameLayout style="@style/dashboard_space_horizontal" > 
     </FrameLayout> 

     <LinearLayout style="@style/dashboard_content_horizontal" > 

      <ImageView 
       style="@style/dashboard_imageview" 
       android:src="@android:drawable/sym_call_missed" /> 

      <TextView 
       style="@style/dashboard_textview" 
       android:text="Text 1" /> 
     </LinearLayout> 

     <FrameLayout style="@style/dashboard_space_horizontal" /> 

     <LinearLayout style="@style/dashboard_content_horizontal" > 

      <ImageView 
       style="@style/dashboard_imageview" 
       android:src="@android:drawable/sym_call_missed" /> 

      <TextView 
       style="@style/dashboard_textview" 
       android:text="Text 2" /> 
     </LinearLayout> 

     <FrameLayout style="@style/dashboard_space_horizontal" /> 
    </LinearLayout> 

    <FrameLayout style="@style/dashboard_space_vertical" /> 

    <LinearLayout style="@style/dashboard_content_vertical" > 

     <FrameLayout style="@style/dashboard_space_horizontal" /> 

     <LinearLayout style="@style/dashboard_content_horizontal" > 

      <ImageView 
       style="@style/dashboard_imageview" 
       android:src="@android:drawable/sym_call_missed" /> 

      <TextView 
       style="@style/dashboard_textview" 
       android:text="Text 3" /> 
     </LinearLayout> 

     <FrameLayout style="@style/dashboard_space_horizontal" /> 

     <LinearLayout style="@style/dashboard_content_horizontal" > 

      <ImageView 
       style="@style/dashboard_imageview" 
       android:src="@android:drawable/sym_call_missed" /> 

      <TextView 
       style="@style/dashboard_textview" 
       android:text="Text 4" /> 
     </LinearLayout> 

     <FrameLayout style="@style/dashboard_space_horizontal" /> 
    </LinearLayout> 

    <FrameLayout style="@style/dashboard_space_vertical" /> 

    <LinearLayout style="@style/dashboard_content_vertical" > 

     <FrameLayout style="@style/dashboard_space_horizontal" /> 

     <LinearLayout style="@style/dashboard_content_horizontal" > 

      <ImageView 
       style="@style/dashboard_imageview" 
       android:src="@android:drawable/sym_call_missed" /> 

      <TextView 
       style="@style/dashboard_textview" 
       android:text="Text 5" /> 
     </LinearLayout> 

     <FrameLayout style="@style/dashboard_space_horizontal" /> 

     <LinearLayout style="@style/dashboard_content_horizontal" > 

      <ImageView 
       style="@style/dashboard_imageview" 
       android:src="@android:drawable/sym_call_missed" /> 

      <TextView 
       style="@style/dashboard_textview" 
       android:text="Text 6" /> 
     </LinearLayout> 

     <FrameLayout style="@style/dashboard_space_horizontal" /> 
    </LinearLayout> 

    <FrameLayout style="@style/dashboard_space_vertical" /> 

</LinearLayout> 

하는 스타일이다. 즐겨.