Android 레이아웃 사례 의 모든 사람 android 9 궁 격

사람마다 안 드 로 이 드 는 인터넷 에서 내 놓 은 우수한 핸드폰 애플 리 케 이 션 이다.우리 가 사용 할 때 그의 첫 페이지 구 조 는 구 궁 격 모델 이 고 사람들 로 하여 금 매우 독특 하 게 느끼 게 한다.왜냐하면 현재 많은 안 드 로 이 드 소프트웨어 는 이런 구조 모델 을 거의 사용 하지 않 기 때문이다.모든 사람 이 안 드 로 이 드 를 성공 적 으로 사용 하여 사람들 로 하여 금 간결 하고 아름 답 게 느끼 게 한다.다음은 모든 사람 이 안 드 로 이 드 의 구 조 를 살 펴 보 자.

사실 이런 레이아웃 은'GridView'라 는 표 레이아웃 을 사 용 했 습 니 다.다음은 제 가 말씀 드 리 겠 습 니 다.
먼저,'교체 디 스 플레이'라 는 개념 을 이해 해 주 십시오.이것 은 마치 레이아웃 이 포 함 된 것 과 같 습 니 다.우 리 는 큰 레이아웃 에 똑 같은 작은 레이아웃 을 반복 적 으로 넣 습 니 다.중복 되 는 부분 은 그림 과 문자 로 구 성 된 작은 컨트롤 입 니 다.그림 은 위 에 있 고 문 자 는 아래 에 있 습 니 다.그 후에 우 리 는 이 작은 컨트롤 을 메 인 용기 에 교체 하면 됩 니 다.
실제 만들어 진 효과 도 를 살 펴 보 자.
 
메 인 용기 의 레이아웃 을 살 펴 보 겠 습 니 다.(GridView)
main.xml

<?xmlversion="1.0"encoding="utf-8"?>
<GridViewxmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/GridView"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:numColumns="auto_fit"
   android:columnWidth="90dp"
   android:stretchMode="columnWidth"
   android:gravity="center">
</GridView>

안의 일부 속성 을 소개 합 니 다:
android:numColumns=”auto_fit",GridView 의 열 수 를 자동 으로 설정 합 니 다.
android:columnWidth="90dp",각 열의 너비,즉 Item 의 너비
android:stretchMode="columnWidth",크기 조정 과 열 크기 동기 화
여기 서 주목 해 야 할 속성 은 columnWidth 입 니 다.열 너비,열 대상 을 지정 하고'중복 가능 한 하위 항목'에 대응 합 니 다.이 하위 항목 은 바로 우리 의 그림 항목 과 그림 아래 텍스트 가 표시 하 는 부분 입 니 다.이 폭 을 지정 하지 않 으 면 기본 값 은 줄 마다(보 여 주 는 줄,인터페이스)'중복 가능 한 하위 항목'만 표시 합 니 다.폭 을 지정 하면 본 고 는 90dp 로 지정 합 니 다.줄 마다 실제 줄 크기 가 90 보다 크 면 다음'중복 가능 한 하위 항목'을 본 줄 에 계속 놓 습 니 다.그래서 한 줄 에 여러 개의 항목 을 표시 하 는 상황 을 보 여 준다.numColumns 속성,자동 충전 값 을 지정 하여 자동 충전 줄 을 표시 합 니 다.
다음은 XML 레이아웃 파일 을 하나 더 만들어 야 합 니 다."교체"가 필요 한 하위 항목(RelativeLayout)을 쓰 겠 습 니 다.
Relative Layout 레이아웃 에 익숙 하지 않 은 사람 은 제 가 쓴 이전 블 로 그 를 보십시오.android 레이아웃 기초 와 범례(1)
item.xml

<?xmlversion="1.0"encoding="utf-8"?>
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<ImageView
  android:layout_width="wrap_content"
  android:id="@+id/ItemImage"
  android:layout_height="wrap_content"
  android:layout_centerHorizontal="true"/>
<TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_below="@+id/ItemImage"
  android:id="@+id/ItemText"
  android:layout_centerHorizontal="true"
/>
</RelativeLayout>

여기에 상대 적 인 레이아웃 을 사 용 했 습 니 다.TextView 에서 속성 android:layot 를 사용 합 니 다.below="@+id/ItemImage"는 그림 아래 에 텍스트 를 표시 합 니 다.
마지막 단계 에서 우 리 는 이 물건 들 을 한데 모 아 실현 해 야 한다.
여기 서 우 리 는 자바 의 데이터 구 조 를 채택 했다.HashMap,용법 은 여기 서 더 이상 말 하지 않 고 스스로 바 이 두 를 할 수 있다.
그리고 ArrayList 를 데이터 원본 으로 구축 하고 SimpleAdapter 를 데이터 어댑터 로 구축 하여 gridView 에 어댑터 대상 을 지정 합 니 다.
다음은 자바 코드:
layout_gridview.java

packagejiabin.activity;
 
importjava.util.ArrayList;
importjava.util.HashMap;
 
importandroid.app.Activity;
importandroid.os.Bundle;
importandroid.view.View;
importandroid.widget.AdapterView;
importandroid.widget.AdapterView.OnItemClickListener;
importandroid.widget.GridView;
importandroid.widget.SimpleAdapter;
importandroid.widget.Toast;
 
publicclasslayout_gridviewextendsActivity {
  /** Called when the activity is first created. */
  @Override
  publicvoidonCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    GridView gridview = (GridView) findViewById(R.id.GridView);
    ArrayList<HashMap<String, Object>> meumList =newArrayList<HashMap<String, Object>>();
    for(inti =1;i <10;i++)
    {
      HashMap<String, Object> map =newHashMap<String, Object>();
      map.put("ItemImage", R.drawable.i1);
      map.put("ItemText",""+i);
      meumList.add(map);
    }
    SimpleAdapter saItem =newSimpleAdapter(this,
         meumList,//   
         R.layout.item,//xml  
         newString[]{"ItemImage","ItemText"},//  map Key
         newint[]{R.id.ItemImage,R.id.ItemText}); //  R Id
 
        //  Item    
        gridview.setAdapter(saItem);
        //      
        gridview.setOnItemClickListener(
          newOnItemClickListener()
          {
            publicvoidonItemClick(AdapterView<?> arg0, View arg1,intarg2,longarg3)
            {
              intindex=arg2+1;//id  0   ，    +1
              Toast.makeText(getApplicationContext(),"      ："+index,0).show();
              //Toast           /  
            }
          }
        );
  }
}

이벤트 응답 을 누 르 면 Toast 를 사용 합 니 다.이 방법 으로 사용자 가 클릭 한 효과 와 트리거 동작 을 표시 할 수 있 습 니 다.위의 코드 는 Toast 기본 효 과 를 사 용 했 습 니 다.
효과 도 를 살 펴 보 자.
 
이런 구 조 는 매우 인기 가 있 지 않 습 니까?본 고 에서 말 한 것 이 모두 에 게 안 드 로 이 드 소프트웨어 프로 그래 밍 을 배 우 는 데 도움 이 되 기 를 바 랍 니 다.