界面编程之登录界面

来源：互联网发布：怎么删除淘宝上的评价编辑：程序博客网时间：2024/04/29 11:20

初次写博客，拙劣之处，还请大家谅解、指出，共同学习。

界面：预期一个ImageView，显示logo，两个输入框分别输入账号密码，两个按钮一个用于登录另一个用于注册。

XML文件：主布局采取LinearLayout布局，然后进行LinearLayout的嵌套使用。下面是XML的布局代码：activity_login

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"     android:focusable="true"    android:focusableInTouchMode="true"    android:background="@drawable/gradient"    >    <!-- 此处嵌套可以省略  设置上边距 -->    <ImageView        android:layout_marginTop="30dp"        android:layout_gravity="center_horizontal"        android:layout_width="80dp"        android:layout_height="80dp"        android:src="@drawable/logo2"        />    <!-- LinearLayut 内部嵌套LinearLayout 水平排布    -->    <LinearLayout        android:orientation="horizontal"        android:layout_width="match_parent"        android:layout_height="50dip"        android:layout_marginTop="30dip"        >        <TextView            android:layout_width="40dip"            android:layout_height="fill_parent"            android:background="#FFFFFF" />        <!-- fill_parent与match_parent功能相同 ，后者是前者的替代品-->        <EditText             android:layout_height="fill_parent"            android:layout_width="fill_parent"            android:hint="账号"            android:id="@+id/ID"            android:background="#FFFFFF"            <!-- 设置hint字体颜色-->            android:textColorHint="#E0E0E0"            <!-- 设置只能输入整数 -->            android:numeric="integer"            <!-- hint文字与正文的文字大小相同，颜色却是独立的 -->            android:textSize="20dip"            />    </LinearLayout>    <!-- 与前一个输入框大致相同  之间 留下一个缝隙，好分清两个输入框 -->    <LinearLayout          android:orientation="horizontal"          android:layout_width="match_parent"          android:layout_height="50dp"          android:layout_marginTop="2dip" >          <TextView              android:layout_width="40dip"              android:layout_height="match_parent"              android:background="#FFFFFF" />          <EditText              android:id="@+id/pwd"              android:layout_width="fill_parent"              android:layout_height="match_parent"              android:hint="密码"              android:textColorHint="#E0E0E0"              android:background="#FFFFFF"              android:textSize="20dip" />    </LinearLayout>    <Button          android:id="@+id/log"         android:layout_height="wrap_content"         android:layout_width="150dp"         android:text="登录"         android:layout_marginTop="60dp"         android:layout_gravity="center_horizontal"         android:background="@drawable/buttonstyle"         /></LinearLayout>

让EditText之前有一段空白，就在之前添加了TextView组件，最初把TextView与EditText设置成同样的高度，发现并不能实现预期效果。小弟现在还不是很了解为什么，如果哪位清楚的话还劳烦给评论下。最后，我把输入框的父容器LinearLayout的高度固定，让EditText和TextView的高度选择match_parent（fill_parent）。

按钮我们在界面里只写了一个登录按钮，为了美观，我选择把注册按钮放在ActionBar上。添加这个按钮可以用java也可以用XML，为了简介，我选择XML，构建menu文件夹，并在此文件夹下创建crepro.xml。如图所示：

以下为crepro.xml的代码：

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android" >    <item        android:id="@+id/regist"        android:title="注册"        android:showAsAction="always"        /></menu>

然后还需要在java代码中进行操作。以下是java代码：Login.java

public class Login extends Activity{EditText pwdedit,idedit;String name="",pwd="";OnClickListener log;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_login);pwdedit=(EditText)findViewById(R.id.pwd);idedit=(EditText)findViewById(R.id.ID);

                //如果大家仔细观察就会发现QQ的安卓版账号密码的输入框hint字体风格不同，就是因为这里没有处理。

pwdedit.setTransformationMethod(new PasswordTransformationMethod());

                //接下来就是ActionBar的操作ActionBar actionBar=getActionBar();actionBar.setBackgroundDrawable(getBaseContext().getResources().getDrawable(R.drawable.backcolor));Button login=(Button)findViewById(R.id.log);//获取账号和密码log=new OnClickListener() {@Overridepublic void onClick(View v) {    name=idedit.getText().toString();    pwd=pwdedit.getText().toString();     final HttpPost httpRequest=new HttpPost("");//这里的域名自己设置    final List params=new ArrayList();    params.add(new BasicNameValuePair("name",name));    params.add(new BasicNameValuePair("pwd", pwd));//建立子线程进行通信    new Thread()    {    public void run() {     try{     //发出HTTP请求    DefaultHttpClient httpClient=new DefaultHttpClient();    httpClient.getParams().setParameter(CoreConnectionPNames.CONNECTION_TIMEOUT,20000);    HttpEntity en=new UrlEncodedFormEntity(params,HTTP.UTF_8);        httpRequest.setEntity(en);     //取得HTTP response        HttpResponse httpResponse=httpClient.execute(httpRequest);         //若状态码为200则请求成功，取到返回数据         if(httpResponse.getStatusLine().getStatusCode()==HttpStatus.SC_OK)        {                  //取出返回的字符串                    String result=EntityUtils.toString(httpResponse.getEntity());                        //System.out.println("result"+result);        if(string.equal("loginsucceed"))//个人设置{        //跳转activityIntent intent=new Intent(Login.this,FunctionActivity.class);startActivity(intent);}        }}catch(Exception e){e.printStackTrace();}};}.start();}};login.setOnClickListener(log);}

        //注册按钮就在这里通过menu文件传送到java文件中@Overridepublic boolean onCreateOptionsMenu(Menu menu) {MenuInflater menuInflater=new MenuInflater(this);menuInflater.inflate(R.menu.crepro, menu);return super.onCreateOptionsMenu(menu);}

        //对于注册功能，是我的队友写的网页，我直接利用WebView打卡网页，在此不列出代码。public boolean onMenuItemSelected(int featureId, android.view.MenuItem item){switch (item.getItemId()) {

                //点击注册按钮时case R.id.regist://进行链接的连接Intent intent =new Intent(this,Register.class);startActivity(intent);break;default:break;}return true;};}

要给按钮加一个特效，让用户感觉得到自己已经点击了按钮。所以在drawable文件夹下创建文件buttonstyle.xml以下为代码：

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android" >    <item android:state_pressed="true" android:drawable="@color/state_press"/>                                                          <item android:state_pressed="false" android:drawable="@color/state_normal"/></selector>

在这个文件中，需要引用color中的量，故在color文件中添加如下代码：

<?xml version="1.0" encoding="utf-8"?><resources>    <color name="state_press">#C2FF68</color>    <color name="state_normal">#FFE66F</color></resources>

当然这样下来的话，界面也是相当的朴素，如果懒得自定义View的话，在背景颜色设置上可以利用渐变的特效来装饰一番。

在drawable文件夹中建立gradient.xml文件,代码如下：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >    <gradient         android:startColor="#FFE66F"        android:endColor="#FFFFF4"        android:angle="270"        android:centerX="0.5"        android:centerY="0.5"        /></shape>

这样，就需要在activity_login文件中添加这样一句：

android:background="@drawable/gradient"

另外，由于背景颜色改变了，如果ActionBar的背景颜色不变的话，会很不自然，我这里已经在Login.java 文件中添加了语句，改变ActionBar的背景颜色。附上最终效果图：

关于ActionBar，我之后还会有博客更新，请期待！拙劣之处还请见谅！

0 0