仿美团(二)之登录界面

原创 2015年07月09日 18:04:27

直接上图片,先看看了解了解:

                                       图片一

                                         图片二

   布局思路:最外层用LinearLayout线性布局,整个背景用#ededed灰色填充满,设置垂直布局orientation="vertical",把每个子布局模块放入其中,设置他们各自相应的属性;看代码就明白了:

   

<?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:background="#ededed"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="#05c0af"
        android:orientation="horizontal" >

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="#05c0af"
            android:src="@drawable/ic_action_back" />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginLeft="3dp"
            android:background="#05c0af"
            android:src="@drawable/ic_action_home" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginLeft="3dp"
            android:text="登录"
            android:textColor="#ffffff"
            android:textSize="20sp" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginLeft="170dp"
            android:background="#05c0af"
            android:text="找回密码"
            android:textColor="#ffffff"
            android:textSize="18sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_margin="10dp"
        android:background="#ffffff"
        android:orientation="vertical"
        android:paddingLeft="10dp"
        android:paddingRight="10dp" >

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="50dp"
            android:orientation="horizontal" >

            <EditText
                android:id="@+id/register_user"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="手机|邮箱|用户名"
                android:maxLength="15"
                android:textSize="20sp" />

            <ImageButton
                android:id="@+id/register_user_clear"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_alignBottom="@id/register_user"
                android:background="@drawable/selector_drawable_select_clear" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="50dp"
            android:orientation="horizontal" >

            <EditText
                android:id="@+id/register_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="密码"
                android:password="true"
                android:maxLength="15"
                android:textSize="20sp" />

            <ImageButton
                android:id="@+id/register_password_clear"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBottom="@id/register_password"
                android:layout_alignParentRight="true"
                android:layout_marginRight="30dp"
                android:background="@drawable/selector_drawable_select_clear" />
        </RelativeLayout>
    </LinearLayout>

    <Button
        android:id="@+id/RegisterBut"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/selector_drawable_registerbut"
        android:text="登录"
        android:textColor="#ffffff" 
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"/>
       <LinearLayout android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:orientation="horizontal"
           android:layout_marginLeft="12dp"
           android:layout_marginTop="10dp">
           <Button 
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="免费注册"
               android:textSize="20sp"
               android:textColor="#05c0af"
               android:background="#ededed"/>
           <Button android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="无账号快速登录"
               android:textSize="25sp"
               android:textColor="#05c0af"
               android:layout_marginLeft="85dp"
               android:background="#ededed"/>
       </LinearLayout>
       <Button android:layout_width="match_parent"
               android:layout_height="50dp"
               android:text="使用合作网站账号进行登录"
               android:textSize="15sp"
               android:textColor="#05c0af"
               android:background="@drawable/login_sliding_drawer_header"
               android:layout_marginTop="140dp"/>
</LinearLayout>

      在java代码中就要对这些按钮键进行监听:
     

package com.myandroid.meituan;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.Toast;

public class RegisterActivity extends Activity {
	private EditText mEditViewUser, mEditViewPassword;
    private ImageButton  mClearUserBut,mClearPasswordBut;
    private Button    mRegisterBut;
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_register);
         
		mRegisterBut = (Button) findViewById(R.id.RegisterBut);
		mEditViewUser = (EditText) findViewById(R.id.register_user);
		mEditViewPassword = (EditText) findViewById(R.id.register_password);
		mClearUserBut =  (ImageButton) findViewById(R.id.register_user_clear);
		mClearPasswordBut =  (ImageButton) findViewById(R.id.register_password_clear);
		//登录按钮监听
		mRegisterBut.setOnClickListener(new OnClickListener() {
			public void onClick(View v) {
				if (mEditViewUser.getText().toString().equals("tiangmei")//判断用户名和密码文本输入框中的字符是否与设置匹配
						&& mEditViewPassword.getText().toString().equals("123456")) {
					startActivity(new Intent(RegisterActivity.this,LoadingActivity.class));//匹配成功跳转到指定的Activity
					
				} 
				 else if(mEditViewUser.getText().toString().equals("")
						|| mEditViewPassword.getText().toString().equals("")){//判断是否为空
					Toast.makeText(RegisterActivity.this, "账号密码不能为空\n请输入后再登录!",
							Toast.LENGTH_LONG).show();//吐丝对话框弹出提示信息
				}
				 else{
					 Toast.makeText(RegisterActivity.this, "账号密码不正确\n请检查后再输入!",
								Toast.LENGTH_LONG).show();
				 }
			}
		});
		//监听用户名清除按钮
		mClearUserBut.setOnClickListener(new OnClickListener() {
			public void onClick(View v) {
				mEditViewUser.setText("");//当点击清除键时,文本框中的内容置为空
			}
		});
		//监听密码清除按钮
		mClearPasswordBut.setOnClickListener(new OnClickListener() {
			public void onClick(View v) {
				mEditViewPassword.setText("");

			}
		});
		
		mClearUserBut.setVisibility(View.INVISIBLE);//设置用户名清除按钮在启动Activity时不可见
		//监听用户名编辑
		mEditViewUser.addTextChangedListener(new TextWatcher() {
			public void onTextChanged(CharSequence s, int start, int before,
					int count) {

				if (s.length() > 0) {//判断当有输入字符时清除键可见,空字符时清除键隐藏
					mClearUserBut.setVisibility(View.VISIBLE);
				} else {
					mClearUserBut.setVisibility(View.INVISIBLE);
				}
			}
			public void beforeTextChanged(CharSequence s, int start, int count,
					int after) {
			}
			public void afterTextChanged(Editable s) {
			}
		});
		
		mClearPasswordBut.setVisibility(View.INVISIBLE);//设置密码清除按钮在启动Activity时不可见
		mEditViewPassword.addTextChangedListener(new TextWatcher() {//监听密码编辑
			public void onTextChanged(CharSequence s, int start, int before,
					int count) {
				if (s.length() > 0) {//判断当有输入字符时清除键可见,空字符时清除键隐藏
					mClearPasswordBut.setVisibility(View.VISIBLE);
				} else {
					mClearPasswordBut.setVisibility(View.INVISIBLE);
				}
			}
			public void beforeTextChanged(CharSequence s, int start, int count,
					int after) {
			}
			public void afterTextChanged(Editable s) {
			}
		});
	}
}


 

仿美团登录界面

在这里主要运用到的是ViewPager和TabLayout。首先展示效果图简单介绍下ViewPagerViewPager和ListView很相似都要使用到Adapter。ViewPager中有三种Ad...
  • Fessible_Max
  • Fessible_Max
  • 2017年04月23日 09:54
  • 1021

高仿美团筛选菜单

高仿美团筛选菜单最近做项目中遇到了很多类似美团筛选菜单,抱着不重复发明轮子的思想去github上找了些开源的项目,但大都用的popupWindow实现,切换效果比美团要差很多,从一个菜单切换到另一个菜...
  • djk_dong
  • djk_dong
  • 2015年07月13日 18:03
  • 3025

Android自定义控件之仿美团下拉刷新

美团的下拉刷新分为三个状态: 第一个状态为下拉刷新状态(pull to refresh),在这个状态下是一个绿色的椭圆随着下拉的距离动态改变其大小。 第二个部分为放开刷新状态(release to...
  • nugongahou110
  • nugongahou110
  • 2015年11月01日 14:41
  • 12050

仿美团外卖效果

下面ListView向上滚动时,先让上面的图片往上滚动,直到图片看不到时再让下面的ListView向上滚动。 当向下滑动时,先让ListView往下滑动,直到ListView不能往下滑动时在让上面图片...
  • qq909157370
  • qq909157370
  • 2016年01月26日 20:48
  • 6442

仿美团商品列表显示

仿美团商品列表显示 左边显示种类、右边显示种类中的详细 选中后加入购物车、可以清空购物车 直接上图看效果: 1,展示页面 2,选择商品后 两遍都有相应数量显示 ...
  • zzq272804553
  • zzq272804553
  • 2017年06月30日 15:12
  • 293

Android开发:仿美团下拉列表菜单,帮助类,复用简单

最近在项目中需要用到下拉菜单,公司比较推崇美团的下拉菜单,于是要实现该功能,想着,这个功能应该是一个经常会用到的,于是何不写一个帮助类,只要往这个类里面传入特定的参数,既可以实现下来菜单,而且还可以实...
  • weidongjian
  • weidongjian
  • 2015年03月12日 15:20
  • 3185

仿美团加载动画效果

这两天在用美团的时候,平时中没有注意的一个小细节,今天注意到了,就是在进入新页面还没有加载数据的时候,我们都可以看到一个小人像是在跑步,于是我非常好奇这个东西是怎么做的呢?于是乎我就把它的apk下载下...
  • u012417984
  • u012417984
  • 2015年11月20日 23:06
  • 2682

iOS中仿美团的下拉菜单开源组件

1.  https://github.com/dopcn/DOPDropDownMenu 2.  https://github.com/12207480/DOPDropDownMenu-Enhanc...
  • zdby11
  • zdby11
  • 2016年04月29日 09:16
  • 2083

Android仿美团购买悬浮效果

本文为学习笔记,如果要看原版,请点击: http://blog.csdn.net/xiaanming/article/details/17761431建议最好看原版.如果要制作如此的效果,根据作者的...
  • joke124
  • joke124
  • 2015年05月02日 16:12
  • 913

仿美团外卖源码加自己做了个模拟数据加载的效果

入门了微信小程序之后,跟着视频做了个入门的“天气预报”简易版小程序,自己做了一个仿“豆瓣电影”的小程序,之前博文都写了,又在网上搜到一份“美团外卖”小程序的源码,所以就马上动手跟着做了起来,使用了它给...
  • Inite
  • Inite
  • 2017年07月13日 23:54
  • 1953
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:仿美团(二)之登录界面
举报原因:
原因补充:

(最多只允许输入30个字)