Android 개발 실례 로그 인 인터페이스의 실현

본 고 에서 보 여줄 안 드 로 이 드 개발 실례 는 어떻게 안 드 로 이 드 의 미니 트 위 터 로그 인 인 인 터 페 이 스 를 완성 하 는 지 입 니 다.다음은 그림 의 인터페이스 효 과 를 어떻게 실현 하 는 지 단계별 로 설명 하여 모두 가 쉽게 아름 다운 로그 인 인 인 터 페 이 스 를 만 들 수 있 도록 합 니 다.
miniTwitter 로그 인 인터페이스 효과 도
최종 완성 할 효과 도 를 먼저 붙 입 니 다:

       miniTwitter 로그 인 인터페이스의 레이아웃 분석
       먼저 인터페이스 그림 에서 구 조 를 분석 하고 대체적으로 세 부분 으로 나 눌 수 있 으 며 다음은 각 부분 을 설명 한다.
       첫 번 째 부분 은 그 라 데 이 션 배경 을 가 진 LinearLayout 레이아웃 입 니 다.배경 그 라 데 이 션 색 에 대해 코드 를 붙 이지 않 습 니 다.효 과 는 다음 그림 과 같 습 니 다.

두 번 째 부분 은 빨간색 선 구역 내 에 1,2,3,4 를 포함한다. 그림 에서 보 듯 이:

빨간색 1 은 원 각 이 있 고 배경 색 이\#55FFFFFF(옅 은 파란색)인 RelativeLayout 레이아웃 을 표시 합 니 다.코드 는 다음 과 같 습 니 다.
XML/HTML 코드


<?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
    <solid android:color="#55FFFFFF" /> 
    <!--       
      ：    bottomRightRadius           bottomLeftRadius   --> 
    <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" 
        android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp"/> 
</shape>

solid 는 충전 색 을 나타 내 는데 여 기 는 옅 은 파란색 으로 채 워 져 있 습 니 다.corners 는 원 각 을 설정 합 니 다.
dp(즉 dip,device independent pixels)장치 독립 픽 셀:이것 은 장치 하드웨어 와 관련 이 있 습 니 다.일반적으로 우 리 는 WVGA,HVGA 와 QVGA 를 지원 하기 위해 픽 셀 에 의존 하지 않 습 니 다.안 드 로 이 드 에서 개 발 된 프로그램 은 해상도 가 다른 휴대 전화 에서 실 행 될 것 이다.프로그램의 외관 이 크게 다 르 지 않도록 dip 개념 을 도입 했다.예 를 들 어 사각형 10 x 10dip 를 정의 합 니 다.해상도 가 160 dpi 인 화면 에서 예 를 들 어 G1 은 바로 10 x 10 픽 셀 입 니 다.240 dpi 화면 에 서 는 15 x 15 픽 셀 이다.환산 공식 은 pixs=dips*(density/160)이다.density 는 화면의 해상도 입 니 다.
그리고 RelativeLayou 의 background 는 이 drawable 을 참조 합 니 다.구체 적 인 RelativeLayout 설정 은 다음 과 같 습 니 다.
XML/HTML 코드


<RelativeLayout 
     android:id="@+id/login_div" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:padding="15dip" 
     android:layout_margin="15dip" 
     android:background="@drawable/background_login_div_bg" 
     > 
</RelativeLayout>

padding 은 내부 여백(즉 내용 과 테두리 의 거 리 를 말 함),layotmargin 은 바깥쪽 거리 입 니 다.
다음은 지역 2 입 니 다.계 정의 텍스트 와 입력 상자 입 니 다.먼저 계 정의 텍스트 입 니 다.코드 는 다음 과 같 습 니 다.
XML/HTML 코드


<TextView 
    android:id="@+id/login_user_input" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_alignParentTop="true" 
    android:layout_marginTop="5dp" 
    android:text="@string/login_label_username" 
    style="@style/normalText"/>

       android:layout_alignParent Top 은 이 TextView 의 위 치 를 맨 위 에 표시 합 니 다.
       android:layout_marginTop="5dp"이 TextView 의 테두리 와 RelativeLayout 의 상단 테두리 거 리 는 5dp 임 을 표시 합 니 다.
       이 TextView 에 글꼴 색상 과 글꼴 크기 를 설정 하고 res/style.xml 에 정의 해 야 합 니 다.
XML/HTML 코드


<style name="normalText" parent="@android:style/TextAppearance"> 
    <item name="android:textColor">#444</item> 
    <item name="android:textSize">14sp</item> 
</style>

계 정의 입력 상 자 를 정의 합 니 다.다음 과 같 습 니 다.
XML/HTML 코드


<EditText 
    android:id="@+id/username_edit" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:hint="@string/login_username_hint" 
    android:layout_below="@id/login_user_input" 
    android:singleLine="true" 
    android:inputType="text"/>

android:hint 입력 상자 에 있 는 알림 텍스트,android:layotbelow 여 기 는 계 정의 텍스트 상자 아래 에 설정 되 어 있 습 니 다.android:singleLine 은 한 줄 로 입력 합 니 다.(즉,리 턴 을 입력 할 때 줄 을 바 꾸 지 않 습 니 다)android:input Type 여 기 는 text 가 입력 한 형식 을 텍스트 로 표시 합 니 다.
영역 3 은 암호 텍스트 와 입력 상자 입 니 다.같은 영역 2,코드 는 다음 과 같 습 니 다.
XML/HTML 코드


<TextView 
   android:id="@+id/login_password_input" 
   android:layout_width="wrap_content" 
   android:layout_height="wrap_content" 
   android:layout_below="@id/username_edit" 
   android:layout_marginTop="3dp" 
   android:text="@string/login_label_password" 
   style="@style/normalText"/> 
<EditText 
   android:id="@+id/password_edit" 
   android:layout_width="fill_parent" 
   android:layout_height="wrap_content" 
   android:layout_below="@id/login_password_input" 
   android:password="true" 
   android:singleLine="true" 
   android:inputType="textPassword" 
/>

영역 4,로그 인 버튼:
XML/HTML 코드


<Button 
   android:id="@+id/signin_button" 
   android:layout_width="wrap_content" 
   android:layout_height="wrap_content" 
   android:layout_below="@id/password_edit" 
   android:layout_alignRight="@id/password_edit" 
   android:text="@string/login_label_signin" 
   android:background="@drawable/blue_button" 
/>

세 번 째 부분:아래 의 문자 와 두 장의 그림 은 각각 1,2,3,4 를 표시 했다.

지역 1:RelativeLayout 입 니 다.하지만 여기 설정 은 간단 합 니 다.코드 는 다음 과 같 습 니 다.
XML/HTML 코드


<RelativeLayout 
   android:layout_width="fill_parent" 
   android:layout_height="wrap_content"> 
</RelativeLayout>

구역 2:"계 정 없어 요?"등록"이 몇 개의 문 자 는 string 에 정의 되 어 있 으 며,탭 을 포함 하고 있 습 니 다.XML/HTML 코드계 정 이 없 습 니까?등록
정 의 는 다음 과 같 습 니 다.
XML/HTML 코드


<TextView android:id="@+id/register_link" 
  android:text="@string/login_register_link" 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content" 
  android:layout_marginLeft="15dp" 
  android:textColor="#888" 
  android:textColorLink="#FF0066CC" 
/>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Bitrise에서 배포 어플리케이션 설정 테스트하기

이 글은 Bitrise 광고 달력의 23일째 글입니다. 자체 또는 당사 등에서 Bitrise 구축 서비스를 사용합니다. 그나저나 며칠 전 Bitrise User Group Meetup #3에서 아래 슬라이드를 발표했...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Android 개발 실례 로그 인 인터페이스의 실현

좋은 웹페이지 즐겨찾기