GoWeather 날씨 앱 에서처럼 슬라이더를 만드는 방법은 무엇입니까?

Question

go weather 앱 (Go Weather On Google Play)에는 아래 이미지의 'MON', 'TUE', 'WED'바로 아래쪽에 멋진 작은 슬라이더가 있습니다. 더 이상 매일 같이 3 일뿐만 아니라 예측을 표시하도록

당신은 슬라이더를 드래그 할 수 있습니다. 슬라이더를 아래로 드래그하여 슬라이더를 닫고 일일 그래픽 온도 + 아이콘을 숨길 수 있습니다. 이 3 개 포지션

(아래와 같이) (예측으로 보이는) 화면
1. 20 % 화면
2. 90 %
3. 를 지원하는 것 때문에
   I이 통상 슬라이더되지 가정 화면의 0 % (슬라이더 막대를 제외하고 볼 수 없음)

이 유형의 UI를 만드는 방법을 아는 사람이 있습니까?

코드 샘플 또는 사이트 링크에 ​​감사드립니다.

Answer 1

이 레이아웃과 위젯의 단지 배치, 여기 입니다, 당신은이 같은 설계 사랑하는 위젯과 레이아웃을 넣을 수 있습니다, 내가 만든 샘플 XML입니다

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" > 

<TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_centerHorizontal="true" 
    android:layout_centerVertical="true" 
    android:padding="@dimen/padding_medium" 
    android:text="@string/hello_world" 
    tools:context=".MainActivity" /> 


<SlidingDrawer android:id="@+id/SlidingDrawer" android:handle="@+id/slideHandleButton" 
     android:content="@+id/contentLayout" android:layout_width="wrap_content" 
     android:layout_height="120dp" android:orientation="vertical" 

     android:layout_alignParentBottom="true" 
     > 

     <Button 
      android:layout_width="fill_parent" 
      android:layout_height="10dp" 
      android:id="@+id/slideHandleButton" 
      android:background="#00868B" /> 


     <LinearLayout 
      android:id="@+id/contentLayout" 
      android:layout_width="fill_parent" 
      android:layout_height="150dp" 
      android:background="#90000000" 
      android:gravity="center|top" 
       > 

      <FrameLayout 
        android:layout_width="wrap_content" 
        android:layout_height="150dp" 
        android:layout_weight="1" 
       > 

       <LinearLayout 
         android:layout_width="fill_parent" 
         android:layout_height="fill_parent" 
         android:gravity="center" 
         android:layout_gravity="center_vertical" 
        > 
       <ImageView 

         android:layout_width="wrap_content" 
         android:layout_height="fill_parent" 
         android:src="@drawable/diego" 

        /> 
       <Button 

        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="Diego" 

        /> 
       </LinearLayout> 
      </FrameLayout> 
      <FrameLayout 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       > 
       <LinearLayout 
         android:layout_width="fill_parent" 
         android:layout_height="fill_parent" 
         android:gravity="center" 
         android:layout_gravity="center_vertical" 
        > 
       <ImageView 

         android:layout_width="wrap_content" 
         android:layout_height="fill_parent" 
         android:src="@drawable/ellie" 

        /> 
       <Button 

        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="Ellie" 

        /> 
       </LinearLayout> 
      </FrameLayout> 
      <FrameLayout 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       > 
       <LinearLayout 
         android:layout_width="fill_parent" 
         android:layout_height="fill_parent" 
         android:gravity="center" 
         android:layout_gravity="center_vertical" 
        > 
       <ImageView 

         android:layout_width="wrap_content" 
         android:layout_height="fill_parent" 
         android:src="@drawable/scart" 

        /> 
       <Button 

        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:background="@drawable/sid" 

        /> 
       </LinearLayout> 
      </FrameLayout> 


     </LinearLayout> 

</SlidingDrawer> 

그냥이 붙여 넣기 프로그램에서 작업중인 데이터를 볼 수 있습니다. 지금 코드를 작성할 필요가 없으며 필요에 따라 관련된 이벤트를 처리 할 수 ​​있습니다. 여기 사이트에서 이미지를 사용 했으므로 일부 이미지를 다운로드하거나 기존 이미지를 사용하고이 코드에서 사용 된 드로어 블을 교체하십시오. 희망을 얻으실 수 있습니다.