Android Studio 는 간단 한 QQ 로그 인 인터페이스의 예제 코드 를 실현 합 니 다.
8108 단어 AndroidStudioQQ로그 인 인터페이스
QQ 는 우리 가 일상생활 에서 가장 많이 사용 하 는 소프트웨어 중 하나 로 로그 인 인터페이스 와 들 어간 채 팅 인터페이스,친구 목록 인터페이스 와 공간 동적 인터페이스 등 을 포함한다.로그 인 인터페이스의 제작 이 비교적 간단 하고 주로 레이아웃 의 사용 을 시험 하 며 QQ 프로젝트 를 실현 하 는 첫 번 째 단계 입 니 다.현재 앱 개발 의 첫 번 째 업 무 는 모두 로그 인 페이지 를 실현 하 는 것 이기 때문에 QQ 로그 인 인터페이스 가 향후 소프트웨어 개발 에 중요 한 역할 을 하 는 것 을 배 웠 다.
개발 환경
3.상세 한 디자인
1.이미지 디자인
먼저 layot 파일 에서 전체 페이지 의 레이아웃 으로 RelativeLayout(상대 레이아웃)을 선택 하 였 습 니 다.
상단 에 ImageView 컨트롤 을 설 치 했 습 니 다.너비 와 높이 는 모두 70dp 이 고 수평 은 가운데 에 true 로 설정 되 어 있 습 니 다.
그리고 프로필 사진 을 전체 페이지 에서 하향 조정 하고 맨 위 에 바짝 붙 지 마 세 요.그 러 니까 layotmargin Top 을 40dp 로 설정 합 니 다.
마지막 으로 drawable 폴 더 의 head 파일 을 프로필 로 선택 하 십시오.코드 는 다음 과 같 습 니 다:
<ImageView
android:id='@+id/iv'
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="40dp"
android:background="@drawable/head"/>
2,계 정 입력 상자LinearLayout(선형 레이아웃)을 계 정 입력 상자 의 바깥쪽 레이아웃 으로 하고 orientation 은 수평 배열 로 설정 합 니 다.
TextView 컨트롤,너비,높이 설정 wrapcontent,즉 내용 크기 에 맞 게 텍스트'계 정'을 표시 합 니 다.
이 어 EditText 컨트롤 을 설치 하여 계 정 내용 을 입력 하고 layot 를 사용 합 니 다.toRight Of 속성 은 계 정의 오른쪽 에 위치 합 니 다.
<LinearLayout
android:id="@+id/number_11"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/iv"
android:layout_centerVertical="true"
android:layout_marginBottom="5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="15dp"
android:background="#ffffff"
android:orientation="horizontal">
<TextView
android:id="@+id/tv_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text=" :"
android:textColor="#000"
android:textSize="20sp" />
<EditText
android:id="@+id/et_number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/tv_number"
android:layout_marginLeft="5dp"
android:background="@null"
android:inputType="text"
android:padding="10dp" />
</LinearLayout>
3.비밀번호 입력 상자가장 바깥쪽 은 여전히 LinearLayout(선형 레이아웃)이 고 전체적으로 이전 LinearLayout 의 아래 에 놓 여 있 으 며 컨트롤 배열 은 여전히 horizontal(수평)입 니 다.
텍스트 내용 은'비밀번호'이 고 텍스트 색상 은 검은색 이 며 텍스트 크기 는 20sp 입 니 다.
EditText 텍스트 입력 상 자 를 하나 더 놓 습 니 다.input Type 은 textPassword 로 설정 되 어 있 으 며 입력 할 때 입력 내용 을 숨 기 고***로 대체 합 니 다.
<LinearLayout
android:id="@+id/password_11"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/number_11"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#ffffff"
android:orientation="horizontal">
<TextView
android:id="@+id/tv_password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text=" :"
android:textColor="#000"
android:textSize="20sp" />
<EditText
android:id="@+id/et_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_toRightOf="@id/tv_password"
android:background="@null"
android:inputType="textPassword"
android:padding="10dp"/>
</LinearLayout>
4、로그 인 버튼계 정 암호 상자 아래 에 Button 컨트롤 을 설치 합 니 다.텍스트 내용 은'로그 인'이 고 텍스트 색상 은 파란색 입 니 다.
<Button
android:id="@+id/btn_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="38dp"
android:background="#3C8DC4"
android:text=" "
android:textColor="#ffffff"
android:textSize="20sp"
android:layout_below="@+id/password_11"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"/>
5、버튼 클릭 이벤트MainActivity 에서 btn 이라는 변 수 를 먼저 설명 하고 방금 설정 한 로그 인 단추 와 연결 합 니 다.
그리고 setOnClickListener 단 추 를 누 르 고 이벤트 모니터 를 누 르 면 모니터 에 onClick 방법 을 설명 하고 대화 상 자 를 표시 하 는 dialog 변 수 를 설명 합 니 다.
setTitle()은'계 정 이나 비밀번호 가 비어 있 으 면 안 됩 니 다'라 는 대화 상자 제목 아이콘 을,setIcon()은'계 정과 비밀 번 호 를 입력 하 십시오'라 는 안내 메 시 지 를 설정 했다.
마지막 으로'확인'단추 와'취소'단 추 를 추 가 했 습 니 다.단 추 를 누 르 면 dialog.dismiss()방법 으로 대화 상 자 를 닫 습 니 다.
public class MainActivity extends AppCompatActivity {
public Button btn;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btn = (Button) findViewById(R.id.btn_login);//
btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
android.app.AlertDialog dialog;
android.app.AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this)
.setTitle(" ") //
.setIcon(R.mipmap.ic_launcher) //
.setMessage(" ") //
// " "
.setPositiveButton(" ", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss(); //
MainActivity.this.finish(); // MainActivity
}
})
// “ ”
.setNegativeButton(" ", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss(); //
}
});
dialog = builder.create();
dialog.show();
}
});
}
}
프로젝트 효과1.시 뮬 레이 터 로 실행 합 니 다.
2.비밀 번 호 를 입력 하지 않 고 로그 인 버튼 을 누 르 면 알림 대화 상자 가 표 시 됩 니 다.
3.계좌 번호 와 비밀 번 호 를 입력 하 세 요.
5.프로젝트 총화
이번 프로젝트 는 비교적 기본 적 인 내용 에 속 하 므 로 초보 자 들 은 이번 프로젝트 를 통 해 인터페이스 구조 와 컨트롤 의 사용 을 능숙 하 게 파악 하여 향후 프로젝트 개발 에 튼튼한 기반 을 다 져 주 기 를 바 랍 니 다.
이번 프로젝트 파일 의 원본 링크 는 다음 과 같 습 니 다QQ_jb51.rar
안 드 로 이 드 스튜디오 가 간단 한 QQ 로그 인 인터페이스 를 실현 하 는 예제 코드 에 관 한 글 은 여기까지 소개 되 었 습 니 다.더 많은 안 드 로 이 드 스튜디오 QQ 로그 인 인터페이스 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 부탁드립니다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.