Android开发系列(十一)QQ登陆界面——Android控件使用实例
Android开发系列（⼗⼀）QQ登陆界⾯——Android控件使⽤实
例
  这是新年第⼀弹，这⼏天家⾥有些闹⼼的事，直到现在还没解决，所以⼀直未更新博客。不过这两个夜晚的时间做了⼀个QQ登录界⾯（2013版），其实我早就想做这么⼀个界⾯，只是前⼀段时间还没有复习太多的东西，现在在处理那些烦⼼事的零散时间做出来了基本的界⾯，也算是值得⾼兴的事情吧。
  话不多说，这次因为可能讲的内容⽐较多，可能会分两次讲，所以⾸先先上图，以便对最终实现能够达到什么养的效果⼼中有数。
这是⼿机QQ2013官⽅版的登录界⾯：
这个是我⾃⼰做出来的 QQ登录界⾯：
当然与官⽅版相⽐还是有很⼤的差距，不过对于学习安卓控件的使⽤已经⾜够了。
  为实现上述界⾯，需要有⼏个关键的知识点需要学习：
⼀、实现圆⾓的效果——学会使⽤描述背景的drawable/中的 xml⽂件
  需要在drawable⽂件夹中创建xml⽂件，⽂件的⽗控件类型为shape，在shape⽗控件中，有<solid/>  <corners/> <stroke/> <padding/> 等属性，分别处理背景的填充颜⾊、边⾓的曲率、边框线的宽度和颜⾊、上下左右内边框（即背景超出使⽤改背景的空间的宽度）
例如，若想实现⼀个圆⾓的ImageButton，可以创建⼀个 l⽂件
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="schemas.android/apk/res/android">
<solid android:color="#ffffff"/>
<corners android:radius="10px"/>
<padding android:left="3dip" android:top="3dip" android:right="3dip" android:bottom="3dip"/>
</shape>
然后在Activity类中⽤ImageButton的实例设置setBackgroundResource(); 或者在xml布局⽂件中在配置控件属性使⽤
android:background="@drawable/fillet_shape"
注意这⾥在配置好背景之后，在为ImageView设置显⽰的图⽚时，只能使⽤setImageResource()⽽不能使⽤setBackgroundResource();
学会这点很重要，后⾯就可以举⼀反三，本例中使⽤该⽅法为 EditText设置了边框，为ListView的每⼀个Item设置了边框，为按钮设置了圆⾓背景。就不再特殊说明
⼆、RelativeLayout中控件的布局问题
  不同控件之间是可以覆盖的，注意在布局⽂件中后配置的空间可以覆盖掉之前配置的空间，所以本例在布局⽂件中让ListView控件放在了最后，另外如果想要⼀个控件暂时消失
可以使⽤setVisibility(View.GONE)；的⽅法，这样改控件消失以后被覆盖的空间就可以正常使⽤了。另外本例在EditText中添加按钮并没有⾃定义EditText，⽽是直接通过布局⽂件的描述将联系⼈游标（⼩箭头）嵌在了Edittext中。注意这⾥⼀般不使⽤View.INVISIBLE，这样控件并未消失
三、notifyDataSetChanged⽅法是BaseAdapter的⽅法，所以可以在构造的适配器内部或者创建的适配器对象使⽤。
四、并不是只有Button可以设置OnClickListener  实际上很多常见的空间都可以使⽤，如EditText或者TextView ，这个应该是属于View的抽象⽅法
五、ListView如何调整每⼀个Item边框的宽度并且避免Item之间的分割线颜⾊太深？
⽅法就是上⾯介绍的⾃定义drawable/ 中xml⽂件，来配置边和背景属性，另外在配置ListView控件的属性时设置
android:divider="#aaaaaa" android:dividerHeight="0px"  这样可以是ListItem的边框做出上图所⽰的效果。
六、怎样解决ListView中添加Button之后就不响应单击事件的问题？
  原因是Button抢夺了焦点，最简单的解决办法是：在⾃定义的每⼀个ListItem的布局⽂件中在根标签的属性中添加上
android:descendantFocusability="blocksDescendants" 即拒绝ListItem中的⼦控件获得焦点
七、怎样实现在点击某个控件以外的屏幕区域就使该控件消失的效果？本例中实现在点击ListView以外的区域就会使ListView消失的效果。
⽅法是覆写MainActivity的onTouchEvent()⽅法，根据点击的坐标（x,y）与⽬标控件通过getLocation获得的控件左上⾓坐标，再结合⽬标控件的宽和⾼，判断点击的点是否在控件内，进⽽决定对该控件执⾏怎样的操作。
例⼦：
@Override
public boolean onTouchEvent(MotionEvent event) {
// TODO Auto-generated method stub
Action()==MotionEvent.ACTION_DOWN && isVisible){
int[] location=new int[2];
//调⽤getLocationInWindow⽅法获得某⼀控件在窗⼝中左上⾓的横纵坐标
//获得在屏幕上点击的点的坐标
int x=(X();
int y=(Y();
if(x<location[0]|| x>location[0]+Width() ||
y<location[1]||y>location[1]+Height()){
isIndicatorUp=false;
isVisible=false;
listIndicatorButton.setBackgroundResource(R.drawable.indicator_down);
loginList.setVisibility(View.GONE);  //让ListView列表消失，并且让游标向下指！
}
}
TouchEvent(event);
}
以上就是我在写程序的过程中遇到的⼀些难题，天有些晚了，直接上所有的代码吧。。
⾸先布局⽂件l
<RelativeLayout xmlns:android="schemas.android/apk/res/android"
xmlns:tools="schemas.android/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity"
android:background="#dde1ee">
<ImageView
android:id="@+id/myImage"
android:layout_width="70dip"
android:layout_height="70dip"
android:layout_marginTop="65dip"
android:layout_centerHorizontal="true"
android:background="@drawable/fillet_shape"/>
<EditText
android:id="@+id/qqNum"
android:layout_width="match_parent"
android:layout_height="40dip"
android:layout_marginLeft="30dip"
android:layout_marginRight="30dip"
android:layout_marginTop="15dip"
android:paddingLeft="50dip"
android:layout_below="@id/myImage"
android:inputType="number"
android:background="@drawable/qqnum_edit"/>
<TextView
android:layout_width="wrap_content"
android:text="账号"
android:textSize="8pt"
android:textColor="@android:color/darker_gray"
android:layout_alignLeft="@id/qqNum"
android:layout_alignTop="@id/qqNum"
android:layout_marginTop="9dip"
android:layout_marginLeft="3dip"/>
<EditText
android:id="@+id/qqPassword"
android:layout_width="match_parent"
android:layout_height="40dip"
android:paddingLeft="50dip"
android:layout_marginLeft="30dip"
android:layout_marginRight="30dip"
android:layout_below="@id/qqNum"
android:background="@drawable/qqnum_edit"/> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="密码"
android:textSize="8pt"
android:textColor="@android:color/darker_gray"
android:layout_alignLeft="@id/qqPassword"
android:layout_alignTop="@id/qqPassword"
android:layout_marginTop="9dip"
android:layout_marginLeft="3dip"/>
<ImageButton
android:id="@+id/qqListIndicator"
android:layout_width="22dip"
android:layout_height="20dip"
android:layout_marginBottom="8dip"
android:layout_marginRight="3dip"
android:layout_alignBottom="@+id/qqNum"
android:layout_alignRight="@+id/qqNum"
android:background="@drawable/indicator_down"/> <ImageButton
android:id="@+id/delete_button_edit"
android:layout_width="18dip"
android:layout_height="18dip"
android:layout_marginBottom="8dip"
android:layout_marginRight="3dip"
android:layout_alignBottom="@+id/qqNum"
android:layout_toLeftOf="@id/qqListIndicator"
android:background="@drawable/delete_button_edit"        android:visibility="gone"/>
<Button
android:id="@+id/qqLoginButton"
android:layout_width="match_parent"
android:layout_height="35dip"
android:layout_below="@id/qqPassword"
android:layout_alignLeft="@id/qqNum"
android:layout_alignRight="@id/qqNum"
android:layout_marginTop="20dip"
android:background="@drawable/login_button_back"        android:text="登录"
android:textColor="@android:color/white"/> <TextView
android:id="@+id/fetchPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_below="@id/qqLoginButton"
android:layout_marginLeft="45dip"
android:text="回密码"
android:textSize="7pt"
android:textColor="#333355"
android:gravity="bottom"/>
<TextView
android:id="@+id/registQQ"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/qqLoginButton"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginRight="45dip"
android:text="注册账号"
android:textSize="7pt"
android:textColor="#333355"
android:gravity="bottom"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/qqLoginButton"
android:text="|"
android:textSize="7pt"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:gravity="bottom"/>
<ListView
android:id="@+id/loginQQList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="@id/registQQ"
android:layout_alignLeft="@id/qqNum"
android:layout_alignRight="@id/qqNum"
android:layout_below="@id/qqNum"
android:focusable="true"
android:focusableInTouchMode="true"
android:visibility="gone"
android:divider="#aaaaaa"
android:dividerHeight="0px"/>
</RelativeLayout>
listItem的布局⽂件：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="schemas.android/apk/res/android"
android:layout_width="match_parent"
android:layout_height="35dip"
android:orientation="horizontal"
android:background="@drawable/list_item_border"
android:descendantFocusability="blocksDescendants">
<ImageView
android:id="@+id/login_userPhoto"
android:layout_width="match_parent"
android:layout_weight="4.7"
android:layout_height="30dip"
android:background="@drawable/contact_1"
android:layout_marginLeft="10dip"
android:layout_marginTop="5dip"
android:layout_marginRight="15dip"
android:layout_marginBottom="5dip"/>
<TextView
android:id="@+id/login_userQQ"
android:layout_width="match_parent"
android:layout_height="30dip"
android:layout_marginTop="5dip"
android:layout_weight="2"
android:gravity="center_vertical"
android:text="1234567890"
android:textSize="7pt"/>
<ImageButton
android:id="@+id/login_deleteButton"
android:layout_width="match_parent"
android:layout_weight="5.8"
android:layout_height="14dip"
android:layout_marginTop="11dip"
android:layout_marginRight="3dip"
android:focusable="true"
android:focusableInTouchMode="true"
android:background="@drawable/deletebutton"/>
</LinearLayout>
⾄于实现圆⾓等边框效果的xml布局⽂件就不再添加，上⾯第⼀条已经给出例⼦，可以根据需要的效果进⾏推⼴。
然后就是MainActivity⽂件，这⾥为了适配器类等够对Activity界⾯进⾏更改，将适配器类写成了MainActivity类的内部类，代码中有说明。另
外相当⼀部分代码是为了实现⼀些细节性的东西，如EditText中游标的的⽅向变化，图⽚图案的变化，使⽤了⼀些常量。ample.android_qq_login;
import java.util.ArrayList;
import java.util.HashMap;
import actor.UserInfo;
import android.os.Bundle;
import android.app.Activity;
t.Context;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.View.OnClickListener;
import android.widget.*;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.AdapterView.OnItemSelectedListener;
public class MainActivity extends Activity {
TextView textFetchPassWord=null,textRegister=null;
Button loginButton=null;
ImageButton  listIndicatorButton=null, deleteButtonOfEdit=null;
ImageView currentUserImage=null;
ListView loginList=null;
EditText qqEdit=null, passwordEdit=null;
private static boolean isVisible=false;        //ListView是否可见
private static boolean isIndicatorUp=false;    //指⽰器的⽅向
public static int currentSelectedPosition=-1;
//⽤于记录当前选择的ListView中的QQ联系⼈条⽬的ID，如果是-1表⽰没有选择任何QQ账户，注意在向
//List中添加条⽬或者删除条⽬时都要实时更新该currentSelectedPosition
String[] from={"userPhoto","userQQ","deletButton"};
int[] to={R.id.login_userPhoto,R.id.login_userQQ,R.id.login_deleteButton};
ArrayList<HashMap<String,Object>> list=null;
@Override
protected void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.activity_main);
textFetchPassWord=(TextView)findViewById(R.id.fetchPassword);
textRegister=(TextView)findViewById(istQQ);
loginButton=(Button)findViewById(R.id.qqLoginButton);
listIndicatorButton=(ImageButton)findViewById(R.id.qqListIndicator);
loginList=(ListView)findViewById(R.id.loginQQList);
list=new ArrayList<HashMap<String,Object>>();
currentUserImage=(ImageView)findViewById(Image);
qqEdit=(EditText)findViewById(R.id.qqNum);
passwordEdit=(EditText)findViewById(R.id.qqPassword);
deleteButtonOfEdit=(ImageButton)findViewById(R.id.delete_button_edit);
qqEdit.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
Text().toString().equals("")==false){
deleteButtonOfEdit.setVisibility(View.VISIBLE);
}
}
});
deleteButtonOfEdit.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
currentUserImage.setImageResource(R.drawable.qqmain);
qq用户名qqEdit.setText("");
currentSelectedPosition=-1;
deleteButtonOfEdit.setVisibility(View.GONE);
}
});
UserInfo user1=new UserInfo(act_0,"1234567",R.drawable.deletebutton);
UserInfo user2=new UserInfo(act_1,"10023455",R.drawable.deletebutton);
addUser(user1);
addUser(user2);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。