Android UI 모 바 일 정보 페이지 디자인

본 논문 의 사례 는 안 드 로 이 드 UI 모 바 일 정보 페이지 에 표 시 된 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
1.효과 도 실행

2.디자인 사고(실현 원리)
1.준 비 된 8 개의 아이콘 을 res/drawable 폴 더 에 복사 합 니 다.
2.수직 선형 레이아웃 을 만 들 고 선형 레이아웃 에서 4 개의 상대 레이아웃 을 만 듭 니 다.
3.상대 레이아웃 에 해당 하 는 TextView 추가
4.values 파일 의 style.xml 파일 에 추출 한 스타일 저장
5.values-zh-rCN,values-en-rus 폴 더 를 만 들 고 폴 더 에 strings.xml 폴 더 를 만 듭 니 다.
3.사례 실현
(1)'핸드폰 정보 페이지'프로그램 만 들 기
휴대 전화 설정 페이지 의 정 보 를 보 여 주 는'휴대 전화 정보 페이지'라 는 프로그램 을 만 듭 니 다.프로그램 인터페이스 대응 레이아웃 파일 activitymian.xml 는 다음 과 같다.

<LinearLayout 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"
 android:background="@android:color/darker_gray"
 android:orientation="vertical"
 tools:context=".MainActivity" >
 <RelativeLayout style="@style/h_wrap_content" 
  android:layout_marginTop="10dp">
  <TextView
   style="@style/tv_style"
   android:layout_alignParentLeft="true"
   android:layout_marginLeft="10dp"
   android:drawableTop="@drawable/clound"
   android:text="@string/_cloud" />
  <TextView
   style="@style/tv_style"
   android:layout_alignParentRight="true"
   android:layout_marginRight="10dp"
   android:drawableTop="@drawable/bluetooth"
   android:text="@string/_bluetooth" />
 </RelativeLayout>
 <RelativeLayout style="@style/h_wrap_content" 
  android:layout_marginTop="10dp">
  <TextView
   style="@style/tv_style"
   android:layout_alignParentLeft="true"
   android:layout_marginLeft="10dp"
   android:drawableTop="@drawable/gesture"
   android:text="@string/_gesture" />
  <TextView
   style="@style/tv_style"
   android:layout_alignParentRight="true"
   android:layout_marginRight="10dp"
   android:drawableTop="@drawable/gps"
   android:text="@string/_gps" />
 </RelativeLayout>
 <RelativeLayout style="@style/h_wrap_content" 
  android:layout_marginTop="10dp">
  <TextView
   style="@style/tv_style"
   android:layout_alignParentLeft="true"
   android:layout_marginLeft="10dp"
   android:drawableTop="@drawable/info"
   android:text="@string/_system_info" />
  <TextView
   style="@style/tv_style"
   android:layout_alignParentRight="true"
   android:layout_marginRight="10dp"
   android:drawableTop="@drawable/internet"
   android:text="@string/_internet" />
 </RelativeLayout>
 <RelativeLayout style="@style/h_wrap_content" 
  android:layout_marginTop="10dp">
  <TextView
   style="@style/tv_style"
   android:layout_alignParentLeft="true"
   android:layout_marginLeft="10dp"
   android:drawableTop="@drawable/language"
   android:text="@string/_language" />
  <TextView
   style="@style/tv_style"
   android:layout_alignParentRight="true"
   android:layout_marginRight="10dp"
   android:drawableTop="@drawable/notifycation"
   android:text="@string/_set_notifycation" />
 </RelativeLayout>
 </LinearLayout>

(2)추출 스타일
레이아웃 파일 을 작성 할 때 같은 컨트롤 사이 의 바깥쪽 거리 와 너비 가 고정 되 어 있 기 때 문 입 니 다.따라서 중복 되 는 레이아웃 코드 가 대량으로 생 길 수 있 습 니 다.코드 의 간결 함 과 중복 사용 을 위해 같은 코드 를 스타일 로 추출 하여 하나의 styles.xml 파일 에 단독으로 넣 을 수 있 습 니 다.일반적인 경우 app 의 vlue 폴 더 에 styles.xml 파일 styles.xml 파일 을 가 져 옵 니 다.다음 과 같 습 니 다.

<resources>
 <style name="AppBaseTheme" parent="android:Theme.Light">
 </style>
 <style name="AppTheme" parent="AppBaseTheme">
 </style>
 <!--   match――parent   wrap_content-->
 <style name="h_wrap_content">
  <item name="android:layout_width">match_parent</item>
  <item name="android:layout_height">wrap_content</item>
 </style>
  <!--     match――parent -->
 <style name="tv_style">
  <item name="android:layout_width">145dp</item>
  <item name="android:layout_height">90dp</item>
  <item name="android:gravity">center</item>
  <item name="android:paddingTop">8dp</item>
  <item name="android:paddingBottom">8dp</item>
  <item name="android:drawablePadding">5dp</item>
  <item name="android:background">@android:color/white</item>
 </style>
</resources> 

(3)values-zh-rCN,values-en-rus 폴 더 만 들 기
procject 로 전환 하여 MyApplication->app->src->main->res 를 열 고 values-zh-rCN,values-en-rus 폴 더 를 만 들 고 이 두 폴 더 아래 에 해당 하 는 strings.xml 파일 을 만 듭 니 다.
values-zh-rCN 폴 더 의 strings.xml 파일 은 다음 과 같 습 니 다.

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <string name="app_name">      </string>
 <string name="menu_settings">  </string>
 <string name="hello_world">  ，  !</string>
 <string name="_cloud">   </string>
 <string name="_bluetooth">  </string>
 <string name="_gesture">     </string>
 <string name="_gps">  </string>
 <string name="_system_info">    </string>
 <string name="_internet">  </string>
 <string name="_language">    </string>
 <string name="_set_notifycation">     </string>
</resources>

values-en-rus 폴 더 의 strings.xml 파일 은 다음 과 같 습 니 다.

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <string name="app_name">phoneInfo</string>
 <string name="menu_settings">Settings</string>
 <string name="hello_world">Hello world!</string>
 <string name="_cloud">Cloud</string>
 <string name="_bluetooth">Bluetooth</string>
 <string name="_gesture">Gesture</string>
 <string name="_gps">Gps</string>
 <string name="_system_info">SystemInfo</string>
 <string name="_internet">Internet</string>
 <string name="_language">Language</string>
 <string name="_set_notifycation">Notifycation</string>
</resources>

당신 은 다음 과 같은 효 과 를 볼 수 있 습 니 다.


(4)인터페이스 와 상호작용 하 는 코드 작성
다음은 MainActivity 에서 사용자 와 상호작용 하 는 논리 코드 를 작성 해 야 합 니 다.MainActivity 에 대응 하 는 코드 는 다음 과 같 습 니 다.

public class MainActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
  }
}

(5)실행 결과 보기

 
각 컨트롤 과 속성 은 상황 에 따라 수정 할 수 있 습 니 다.