Android studio做简单ui第一篇

第一篇 Android Studio 简单的登录ui

• 第一步创建Android项目，选择一个空白模块
• 第二步，我们打开工程目录，找到与Src同级的build.gradle文件，把下面那个添加进去

  compile 'com.wrapp.floatlabelededittext:library:0.0.6'

例如:

apply plugin: 'com.android.application'

android {
    compileSdkVersion 21
    buildToolsVersion "21.1.0"

    defaultConfig {
        applicationId "com.login.ui"//查看应用包名也是这里
        minSdkVersion 14
        targetSdkVersion 21
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
	//编辑框第三方库
	compile 'com.wrapp.floatlabelededittext:library:0.0.6'
	
	
	
}

2. 第三步，我们为XML文件添加布局

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:orientation="vertical"
	android:id="@+id/activity_mainLinearLayoutuquyw"
	android:layout_height="match_parent">

	<LinearLayout
		android:orientation="vertical"
		android:layout_width="match_parent"
		android:layout_height="match_parent">

		<LinearLayout
			android:orientation="vertical"
			android:layout_width="match_parent"
			android:layout_height="0dp"
			android:layout_weight="2"
			android:gravity="center">

			<TextView
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:text="Welcome"
				android:id="@+id/activity_mainTextView_title"
				android:textAppearance="?android:attr/textAppearanceLarge"
				style="@style/AppTheme"
				android:textSize="42sp"
				android:textStyle="bold"/>

		</LinearLayout>

		<LinearLayout
			android:orientation="vertical"
			android:layout_width="match_parent"
			android:layout_height="0dp"
			android:layout_weight="8"
			android:gravity="center_horizontal">
			
			<LinearLayout
				android:orientation="vertical"
				android:layout_width="match_parent"
				android:layout_height="wrap_content"
				android:gravity="center">

				<LinearLayout
					android:orientation="horizontal"
					android:layout_width="match_parent"
					android:layout_height="wrap_content"
					android:gravity="center"
					android:padding="5dp"
					android:layout_marginLeft="20dp"
					android:layout_marginRight="20dp">

					<TextView
						android:layout_width="wrap_content"
						android:layout_height="wrap_content"
						android:text="账号:"
						android:textSize="20sp"/>

					<!--这个是第三方库的控件，如果机房的电脑不支持就把它删掉，是可以正常运行的，下头还有一个也得删掉-->
					<com.wrapp.floatlabelededittext.FloatLabeledEditText
						android:layout_width="match_parent"
						android:layout_height="wrap_content">

						<EditText
							android:layout_width="match_parent"
							android:ems="10"
							android:digits="1234567890"
							android:hint="请输入账号"
							android:layout_height="wrap_content"
							android:maxLength="14"
							android:lines="1"
							android:id="@+id/activitymainEditText1"/>

					</com.wrapp.floatlabelededittext.FloatLabeledEditText>-


				</LinearLayout>

				<LinearLayout
					android:orientation="horizontal"
					android:layout_width="match_parent"
					android:layout_height="wrap_content"
					android:gravity="center"
					android:layout_marginLeft="20dp"
					android:layout_marginRight="20dp"
					android:padding="5dp">

					<TextView
						android:layout_width="wrap_content"
						android:layout_height="wrap_content"
						android:text="密码:"
						android:textSize="20sp"/>


					<com.wrapp.floatlabelededittext.FloatLabeledEditText
						android:layout_width="match_parent"
						android:layout_height="wrap_content">

						<EditText
							android:layout_width="match_parent"
							android:hint="请输入密码"
							android:lines="1"
							android:maxLength="14"
							android:ems="10"
							android:digits="qwertyuiopasdfghjklzxcvbnm1234567890"
							android:layout_height="wrap_content"
							android:inputType="textWebPassword"
							android:id="@+id/activitymainEditText2"/>

					</com.wrapp.floatlabelededittext.FloatLabeledEditText>
					

				</LinearLayout>
				
				<TextView
					android:layout_width="wrap_content"
					android:layout_height="wrap_content"
					android:text="账号或密码错误"
					android:visibility="invisible"
					android:textColor="#FF5252"
					android:id="@+id/activity_mainTextView_hkkkk"/>
				
				<Button
					android:layout_width="match_parent"
					android:layout_height="wrap_content"
					android:text="登录"
					android:layout_marginBottom="10dp"
					android:background="@drawable/Shape"
					android:layout_marginLeft="30dp"
					android:layout_marginRight="30dp"
					android:id="@+id/activitymainButton1"/>

			</LinearLayout>

			<LinearLayout
				android:orientation="horizontal"
				android:id="@+id/activity_mainLinearLayout"
				android:layout_width="match_parent"
				android:layout_height="wrap_content"
				android:gravity="right">

				<TextView
					android:layout_width="wrap_content"
					android:textStyle="italic"
					android:layout_height="wrap_content"
					android:text="没有账号？前往注册"
					android:layout_marginRight="30dp"
					android:id="@+id/activitymainTextView1"/>

			</LinearLayout>

		</LinearLayout>

	</LinearLayout>

</LinearLayout>

• 我们定义好xml文件后，里面有一个button的背景是个资源文目录下的一个文件，那我们就去src/main/res/drawable下创建Shape.xml文件

 <?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- 填充的颜色 -->
    <solid android:color="#64B5F6" />
    <!-- android:radius 弧形的半径 -->
    <!-- 设置按钮的四个角为弧形 -->
    <corners 
		android:radius="30dp" />  
</shape>

• 咱们现在开始写它的java文件

• 我呢申明一下变量名

 //这里申明控件id，可以随便设，下头绑定就行了 .getText().toString()
	private Button bn_uigo;  //登录按钮
	private TextView t1,t2;  //设置t1为标题    t2为注册前往
	private EditText edi1,edi2; //两个编辑框   edi1为账号   edi2为密码
	private String Accoun,password;//设定账号和密码
	private String TAG;   //定义打印数据--用来测试
	private TextView t3;//可以和上面设在一起，我这里单独设一个，好分类一些，这个id用来绑定"账号或密码错误"，这个textview
	private LinearLayout linhhhhhh;//进入软件加载一下动画效果
	private LinearLayout linu;//注册textview父控件，这里创建它为了给它动画
	private SharedPreferences mshart;

• 咱们再给这些定义的变量绑定起来

//绑定控件
	bn_uigo = findViewById(R.id.activitymainButton1);        //按钮
	t1 = findViewById(R.id.activity_mainTextView_title);     //标题
	t2 = findViewById(R.id.activitymainTextView1);           //注册textview 
	edi1 = findViewById(R.id.activitymainEditText1);         //账号编辑框
	edi2 = findViewById(R.id.activitymainEditText2);         //密码编辑框
	t3 = findViewById(R.id.activity_mainTextView_hkkkk);       //提示账号或密码错误
	linhhhhhh = findViewById(R.id.activity_mainLinearLayoutuquyw);//linearlayout动画效果，你可以点R.id.后面那个，直接跳转到它对应id位置
	linu = findViewById(R.id.activity_mainLinearLayout);

• 把申明的量与xml的id绑定了现在我们开始具体操作