애니메이션으로 복잡한 안드로이드 UI 디자인하기

Question

나는 이미지와 텍스트가 포함 된 10 개의 수직 타일 (그림에서 2 개의 큰 상자)을 가지고 있고 타일을 클릭하면 안드로이드 앱을위한 UI를 디자인해야합니다. 동일한 페이지에서 6 개의 요소 (아래 그림의 중앙에 표시된)를 포함하는 스크롤 가능한 gridview로 대체됩니다. (애니메이션으로 표시)

다음은 설명하려고하는 뷰의 스냅 샷입니다. 이 이미지는 10 개의 타일 중 2 개만 표시하고 클릭시 나타나는 gridview는 흰색 상자에 각각 이미지와 텍스트가 들어 있습니다. 나는 디자인이 좋지 않아서, 이것을 구현하는 상세한 대답은 인정 될 것이다. 감사.

Answer 1

귀하의 질문에 많은 세부 사항이 없기 때문에 사진이 모든 것을 명확하게 설명하지는 않지만 여기에 찔림이 있습니다.

타일이 "확장"된다고 말하는 것이 확실하지 않은 경우 중간에있는 6 개의 타일이 그 시간에 나타나기를 기대합니까, 아니면 항상 존재합니까? 나타나면 애니메이션이 될까요?

사진을 얻으려면 최상위 레벨에 RelativeLayout을 입력해야합니다. 오른쪽 상단에이 날짜가 TextView이고 맨 아래에 SlidingDrawer 핸들이 있기 때문입니다. 당신은 배경 화면 테마로 RelativeLayout의 배경을 설정할 수 있습니다. 정적 인 경우 맨 위의 파란색 막대를 추측 할 수 있습니다.

그런 다음이 최상위 RelativeLayout 내부에는 가로 방향으로 LinearLayout이 있습니다. 이 사진에는 세 개의 "창"이 포함됩니다.

이 선형 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를 숨길 필요가있는 경우 공개 설정을 숨김으로 설정하고 코드에서 변경할 수 있습니다.

UPDATE 지금이이 이동하는 방법에 대한 자세한 내용은 ......

확인을, 그래서 하단에 날짜와 SlidingDrawer와 함께 최고 수준의 RelativeLayout의 유지. 중간 부분에서

,이 사람에 의해 조립 된 HorizontalListView 사용할 수 있습니다 How can I make a horizontal ListView in Android?을, 코드와 지침 및 예제는 여기에서 찾을 수 있습니다 : http://www.dev-smart.com/archives/34

는 그런 다음 채우기 위해 자신의 어댑터를 작성해야 그 목록. BaseAdapter를 기반으로 할 수 있습니다 (이 결정은 이미지/정보 저장 방법에 따라 다릅니다).

해당 어댑터의 getView 기능에서 축소 된 뷰와 확장 된 뷰가 모두 하나의 FrameLayout으로 결합되지만 한 번에 하나만 볼 수있는 레이아웃을 가질 수 있습니다. 그것은이 같은 다음과 같이 표시됩니다

목록 어댑터에서

<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> 

, 당신은 다른보기에 적절한 태그를 설정해야합니다, 사용자가 하나 개의 이미지에, 당신은 클릭 한 일을 알고 클릭 그렇게 할 때. 하나의 뷰를 확장하려면 LinearLayout의 가시성을 사라지게하고 ViewPager의 가시성을 변경합니다.

한 번에 하나씩 만 확장해야하는 경우 어댑터에 상태 변수가 어떤 것인지 말할 수 있고 목록의 모든보기에 대해 가시성 속성을 올바르게 설정할 수 있습니다. 그런 다음이를 ListView에서 무효화하여 새로 고칩니다.

이 코드의 꽤 모든이 일을 작성하는 것입니다,하지만 당신이 조직 유지하는 경우, 너무 나쁜해서는 안됩니다 ....