Android miniTwitter登录界面开发实例

本文要演示的Android开发实例是如何完成一个Android中的miniTwitter登录界面,下面将分步骤讲解怎样实现图中的界面效果,让大家都能轻松的做出美观的登录界面。

先贴上最终要完成的效果图:

miniTwitter登录界面的布局分析

首先由界面图分析布局,基本可以分为三个部分,下面分别讲解每个部分。

第一部分是一个带渐变色背景的LinearLayout布局,关于背景渐变色就不再贴代码了,效果如下图所示:

第二部分,红色线区域内,包括1,2,3,4 如图所示:

红色的1表示的是一个带圆角且背景色为#55FFFFFF(淡蓝色)的RelativeLayout布局,代码如下:

<?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 ,不依赖像素。在android上开发的程序将会在不同分辨率的手机上运行。为了让程序外观不至于相差太大,所以引入了dip的概念。比如定义一个矩形10 x 10dip. 在分辨率为160dpi 的屏上,比如G1,正好是10 x 10像素。 而在240 dpi 的屏,则是15 x 15 像素。换算公式为 pixs = dips * (density/160)。density 就是屏的分辨率。

然后RelativeLayou的background引用此drawable,具体RelativeLayout设置如下:

<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 是指内边距(也就是指内容与边框的距离),layout_margin为外边距(它的上一层与边框的距离)。

接下来是区域2,为账号的文本和输入框,首先是账号的文本,代码如下:

<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_alignParentTop 这里表示此TextView的位置处于顶部

android:layout_marginTop="5dp" 这里表示此TextView的边框与RelativeLayout的顶部边框距离有5dp

这里需要对这个TextView设置下字体颜色和字体大小,定义在res/style.xml里面:

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

定义账号的输入框,如下:

<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:layout_below这里是设置为在账号的文本框的下面,android:singleLine 为单行输入(即你输入回车的时候不会在换行了),android:inputType这里text表示输入的类型为文本。

区域3是密码文本和输入框,同区域2,代码如下:

<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,登录按钮:

<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:

Android miniTwitter登录界面

区域1:还是一个RelativeLayout,但这里设置的很简单,代码如下:

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

区域2:"没有账号?注册"这几个文字定义在string里面,包含了一个<a>标签:

<string name="login_register_link">没有帐号? <a href="#" mce_href="#">注册</a></string>

定义如下:

<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"
/> 

TextView是支持简单的html标签的,如<a>标签,但并不是支持所有标签,支持更复杂的html标签得用webView组件。

android:textColorLink是设置文字链接的颜色. 虽然TextView支持<a>标签,但是这里是不能点此链接的,不要被假象迷惑。

区域3是一直猫的卡通图片,貌似有点丑,将就下吧:

XML/HTML代码

<ImageView android:id="@+id/miniTwitter_logo"
  android:src="@drawable/cat"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_alignParentRight="true"
  android:layout_alignParentBottom="true"
  android:layout_marginRight="25dp"
  android:layout_marginLeft="10dp"
  android:layout_marginBottom="25dp"
/>

android:layout_alignParentRight="true" 位于layout的最右边

android:layout_alignParentBottom="true" 位于layout的最底部

android:layout_marginRight="25dp" 该imageView的边框距离layout边框有25dp,其他的margin类似。

区域4 是一个带文字的图片的ImageView:

<ImageView android:src="@drawable/logo"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_toLeftOf="@id/miniTwitter_logo"
  android:layout_alignBottom="@id/miniTwitter_logo"
  android:paddingBottom="8dp"
/>
  android:layout_toLeftOf="@id/miniTwitter_logo" 在那个小猫ImageView的左边(水平位置)

  android:layout_alignBottom="@id/miniTwitter_logo" 这里意思是这两个ImageView(区域3和区域4)下边缘对齐

  android:paddingBottom="8dp" 图片距离ImageView底部边框8dp,也就是将图片上抬个8dp

实现miniTwitter登陆界面的具体步骤

具体步骤如下:

第一步:一些字符串定义

/miniTwitterLoginDemo/res/values/strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <string name="hello">Hello World, LoginActivity!</string>
 <string name="login_label_username">帐号</string>
 <string name="login_label_password">密码</string>
 <string name="login_label_signin">登 录</string>
 <string name="login_status_logging_in">登录中...</string>
 <string name="login_username_hint">Email或手机号</string>
 <string name="login_register_link">没有帐号? <a href="#" mce_href="#">注册</a></string>
 <string name="app_name">miniTwitter</string>
</resources> 

第二步:

/miniTwitterLoginDemo/res/values/style.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style name="normalText" parent="@android:style/TextAppearance">
  <item name="android:textColor">#444</item>
  <item name="android:textSize">14sp</item>
  </style>
</resources> 

第三步:背景色为渐变色

/miniTwitterLoginDemo/res/drawable-mdpi/background_login.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <gradient
   android:startColor="#FFACDAE5"
   android:endColor="#FF72CAE1"
   android:angle="45"
  />
</shape>

第四步:背景色味淡蓝色且为圆角

/miniTwitterLoginDemo/res/drawable-mdpi/background_login_div_bg.xml

<?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>

第五步:

/miniTwitterLoginDemo/res/layout/login.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:background="@drawable/background_login">
 <!-- padding 内边距 layout_margin 外边距
     android:layout_alignParentTop 布局的位置是否处于顶部 -->
 <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"
   >
   <!-- 账号 -->
   <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"/>
   <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"/>
 <!-- 密码 text -->
 <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"
 />
 <!-- 登录button -->
 <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"
 />
 </RelativeLayout> 

 <RelativeLayout
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  >
   <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"
   />
   <ImageView android:id="@+id/miniTwitter_logo"
    android:src="@drawable/cat"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentBottom="true"
    android:layout_marginRight="25dp"
    android:layout_marginLeft="10dp"
    android:layout_marginBottom="25dp"
     />
   <ImageView android:src="@drawable/logo"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toLeftOf="@id/miniTwitter_logo"
    android:layout_alignBottom="@id/miniTwitter_logo"
    android:paddingBottom="8dp"
    />
   </RelativeLayout> 

</LinearLayout> 

第七步:

/miniTwitterLoginDemo/src/com/mytwitter/acitivity/LoginActivity.java

这里要注意的是,该Activity是无标题的,设置无标题需要在setContentView之前设置,否则会报错。

package com.mytwitter.acitivity; 

import android.app.Activity;
import android.os.Bundle;
import android.view.Window; 

public class LoginActivity extends Activity {
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  requestWindowFeature(Window.FEATURE_NO_TITLE);
  setContentView(R.layout.login);
 }
}

到此,Android中的miniTwitter登录界面的制作就介绍完毕了,是不是做出不错的登录界面并不算难呢?谢谢大家

的阅读。

(0)

相关推荐

  • Android实现简洁的APP登录界面

    今天需求要做一个所有app都有的登录界面,正好巩固一下我们之前学的基础布局知识. 先来看下效果图 1.布局的xml文件 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent&qu

  • Android登录界面的实现代码分享

    最近由于项目需要,宝宝好久没搞Android啦,又是因为项目需要,现在继续弄Android,哎,说多了都是泪呀,别的不用多说,先搞一个登录界面练练手,登录界面可以说是Android项目中最常用也是最基本的,如果这个都搞不定,那可以直接去跳21世纪楼啦. 废话不多说,先上效果图了,如果大家感觉还不错,请参考实现代码吧. 相信这种渣渣布局对很多人来说太简单啦,直接上布局: <RelativeLayout xmlns:android="http://schemas.android.com/apk

  • 功能强大的登录界面Android实现代码

    前言 一个好的应用需要一个有良好的用户体验的登录界面,现如今,许多应用的的登录界面都有着用户名,密码一键删除,用户名,密码为空提示,以及需要输入验证码的功能.看着csdn上的大牛们的文章,心里想着也写一个登录界面学习学习,许多东西都是参考别的文章,综合起来的.废话少说,接下来看看是如何实现的. ps:由于懒得抠图.所以程序的图标很难看. 程序运行时的图示: 首先是布局文件没有什么难度. <RelativeLayout xmlns:android="http://schemas.androi

  • Android实现闪屏及注册和登录界面之间的切换效果

    在没给大家介绍正文之前先给大家说下实现思路: 先分别实现闪屏.注册界面.登录界面的活动,再用Intent将相关的活动连接起来,实现不同活动之间的跳转.此次试验代码较多,我只列出主要代码,详细的代码可用底部的下载链接下载. 一.实验效果图: 二.主要代码: (1)WelcomeActivity.Java(这部分代码实现的是第一页的欢迎页面) package com.example.flashscreendemo; import android.app.Activity; import androi

  • Android设计登录界面、找回密码、注册功能

    本文实例为大家分享了Android 登录.找回密码.注册功能的实现代码,供大家参考,具体内容如下 1.数据库的设计 我在数据库中添加了两张表,一张表用来存储用户信息,诸如用户名,密码,手机号等,可任意添加.另一张表用来存储上一个登录用户的账户信息,我是为了方便才另外创建了一张表去存储,而且这张表我设计了它只能存储一条信息,每次的存储都是对上一条记录的覆盖.事实上,我尝试过在存储用户信息的那张表内添加一个标识,用来标记上一次登录的是哪一个帐号,但是这样做的话,每次改变标识都需要遍历整张表,十分的麻

  • Android开发实例之登录界面的实现

    本文要演示的Android开发实例是如何完成一个Android中的miniTwitter登录界面,下面将分步骤讲解怎样实现图中的界面效果,让大家都能轻松的做出美观的登录界面.        miniTwitter登录界面效果图 先贴上最终要完成的效果图:   miniTwitter登录界面的布局分析 首先由界面图分析布局,基本可以分为三个部分,下面分别讲解每个部分. 第一部分是一个带渐变色背景的LinearLayout布局,关于背景渐变色就不再贴代码了,效果如下图所示: 第二部分,红色线区域内,

  • Android属性动画实现炫酷的登录界面

    我们聊聊我们常写的登录界面,这个界面我相信很多人都写过,而且也没什么难度,但是如果要实现比较不一般的效果,那就要花点心思了,先看看项目的效果吧: 我一直都不知道怎么在编辑框连设置图片大小,所以这个图不怎么样适配编辑框了,大家先凑合着看看. 我先讲讲思路,当我们输入完账号跟密码之后,点击登录,那这个输入框就慢慢的消失,在消失后,紧接着就出现这个进度的界面. 思路有了,那我们就开始编码了: 新建一个项目,然后系统生成了一个MainActivity.java文件和activity_main.xml文件

  • Android SharedPreferences实现记住密码和自动登录界面

    SharedPreferences介绍: SharedPreferences是Android平台上一个轻量级的存储类,主要是保存一些常用的配置参数,它是采用xml文件存放数据的,文件存放在"/data/data<package name>/shared_prefs"目录下. SharedPreferences的用法: 由于SharedPreferences是一个接口,而且在这个接口里没有提供写入数据和读取数据的能力.但它是通过其Editor接口中的一些方法来操作Shared

  • Android实现QQ登录界面遇到问题及解决方法

    先给大家炫下效果图: 首先过程中碰到的几个问题: 1.对 EditText 进行自定义背景 2.运行时自动 EditText 自动获得焦点 3.在获得焦点时即清空 hint ,而不是输入后清空 4.清空按钮的出现时机(在得到焦点并且有输入内容时) ......... --- 这些问题都有一一解决 --- 以下是代码: 布局 fragment_main(问题2) <!-- android:focusable="true" android:focusableInTouchMode=&

  • Android QQ登录界面绘制代码

    先看看效果图: 首先过程中碰到的几个问题: 1.对 EditText 进行自定义背景 2.运行时自动 EditText 自动获得焦点 3.在获得焦点时即清空 hint ,而不是输入后清空 4.清空按钮的出现时机(在得到焦点并且有输入内容时) ---  这些问题都有一一解决 --- 以下是代码: 布局 fragment_main(问题2) <!-- android:focusable="true" android:focusableInTouchMode="true&qu

随机推荐