Android的学习与实践6（炫酷登陆界面的实现）

1.收获

今天是过了两周后再上课，感觉是有点跟不上的，但是没有办法，只有慢慢的把感觉找回来，今天虽然只是做了一个demo但是这个demo的知识点还是比较宽的，所以还是有很大的价值的，自己虽然在课上听的不是很明白，但是自己下来后看视频也还是能够理解的。总的来说今天还是没有能够跟上可得节奏，因为有的知识在前面学过，但是还是遗忘了。所以还是要进行复习的，进行熟悉，只有这样才能够把知识点活用，才会有更加灵活的思维方式。

2.技术

（1）有共同旋转或者是平移的动画目的是相反的就可以设置两种状态
（2）在配置xml文件时的代码优化
（3）背景的虚化
（4）系统键盘的隐藏

3.技术的实际应用和实践

（1）有共同旋转或者是平移的动画目的是相反的就可以设置两种状态
在我们给控件设置动画的过程中，我们有一种需求，就是一个动画需要一个外部命令他才能执行，有时同时也伴随着另一个动画的执行。
例如：

TranslateAnimation up= (TranslateAnimation) AnimationUtils.loadAnimation(this,R.anim.hand_up_translate);
        lefthand.startAnimation(up);
        righthand.startAnimation(up);

TranslateAnimation down= (TranslateAnimation) AnimationUtils.loadAnimation(this,R.anim.hand_down_translate);
        lefthand.startAnimation(down);
        righthand.startAnimation(down);

在这两个代码块中有两种不同的动画，一个是执行down,一个是up,那么我们需要去实现这两个动画
首先找到项目：project


image.png

然后在项目中新建一个文件


image.png

在新建的文件下面在新建一个
image.png

然后在新建的文件中实现相关的动画
image.png

image.png

（2）在配置xml文件时的代码优化
在我们进行代码写入的过程中我们会发现我们的代码会显得十分的臃肿，一个代码块里面的代码就会有很多，而另一个代码块里面的代码又会很少，这时候我们会发现代码的外表并不是很美观，并且代码的结构是一样的，那么我们会考虑进行代码的整合。
在这个demo中就有这样的现象。

<EditText
            android:id="@+id/et_password"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="@drawable/editview_shape"
            android:layout_marginTop="20dp"
            android:drawableLeft="@drawable/iconfont_user"
            android:paddingLeft="7dp"
            android:drawablePadding="7dp"
            android:textSize="20sp"
            android:textColor="@color/colorPrimary"
            android:maxLines="1"
            
            android:hint="请输入密码"
            android:inputType="textPassword"
            />

<EditText
            android:id="@+id/et_password"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="@drawable/editview_shape"
            android:layout_marginTop="20dp"
            android:drawableLeft="@drawable/iconfont_user"
            android:paddingLeft="7dp"
            android:drawablePadding="7dp"
            android:textSize="20sp"
            android:textColor="@color/colorPrimary"
            android:maxLines="1"
            
            android:hint="请输入用户名"
            android:inputType="textPassword"
            />

在这个代码块中有很多的代码都是一样的，那么我们就可以来优化代码
首先，我们需要找到value


image.png

然后在value中新建一个xml文件


image.png

然后将这些相同的代码放入这个xml文件中

<resources>
    <!--app中的标题：字号 字体 颜色-->
    <style name="EditTextStyle">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">50dp</item>
        <item name="android:background">@drawable/editview_shape</item>
        <item name="android:layout_marginTop">20dp</item>
        <item name="android:drawableLeft">@drawable/iconfont_user</item>
        <item name="android:paddingLeft">7dp</item>
        <item name="android:drawablePadding">7dp</item>
        <item name="android:textSize">20sp</item>
        <item name="android:maxLines">1</item>
        <item name="android:textCursorDrawable">@color/colorPrimary</item>
    </style>
</resources>

而在xml配置的文件中就看起来就非常好看，简洁了

<EditText
            android:id="@+id/et_password"

            style="@style/EditTextStyle"
            android:hint="请输入密码"
            android:inputType="textPassword"
            />

（3）背景的虚化
在这个项目我们有两处用到了虚化，一个是在在整个背景下用的虚化，另一个地方就是在编辑框背景的时候用到了虚化。虚化的作用是要实际来体现的，不同的地方虚化的作用不同。在虚化的时候我们需要引入一个属性：io.alterac.blurkit.BlurLayout。

背景的虚化：

<!--添加虚化层-->
    <io.alterac.blurkit.BlurLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:blk_fps="0"
        app:blk_blurRadius="10"
        />

在这里面：blk_fps：表示的是虚化的程度
app:blk_blurRadius：表示的是虚化的半径
在这里虚化的作用是将背景模糊化，具有一种美感

编辑框背景的虚化：

<!--输入框背景-->
    <io.alterac.blurkit.BlurLayout
        android:id="@+id/bg"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:background="@drawable/input_bg_shape"
        android:layout_centerInParent="true"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        app:blk_fps="0"
        app:blk_blurRadius="20"
        />

在这里虚化的作用是可以挡住一些不需要看见的控件
（4）系统键盘的隐藏
在这个项目中我们有时候会需要键盘隐藏，而我们用的系统的键盘，那么我们需要通过系统来隐藏键盘
当有控件获得焦点focus 自动弹出键盘
1.点击软键盘的enter键 自动收回键盘
2.代码控制 InputMethodManager
showSoftInput:显示键盘 必须先让这个VIEW成为焦点requestFocuse
我么通过属性： hideSoftInputFromWindow来隐藏键盘

 //1.获取系统输入的管理器
            InputMethodManager inputMethodManager= (InputMethodManager) getSystemService(INPUT_METHOD_SERVICE);
            //2.隐藏键盘
            inputMethodManager.hideSoftInputFromWindow(user.getWindowToken(),0);
            //3.取消焦点
            View v=getCurrentFocus();
            if(v!=null){
                v.clearFocus();//取消焦点
            }

（5）demo的实现
效果：

录制_2019_09_27_11_26_27_260.gif

首先我们需要在xml中把控件配置好

 <!--添加背景图片-->
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/bg"
        android:scaleType="fitXY"/>

    <!--添加虚化层-->
    <io.alterac.blurkit.BlurLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:blk_fps="0"
        app:blk_blurRadius="10"
        />
    <!--猫头鹰-->
    <RelativeLayout
        android:layout_width="280dp"
        android:layout_height="200dp"
        android:layout_centerHorizontal="true"
        android:layout_alignTop="@id/bg"
        android:layout_marginTop="-100dp"
        >
        <!--头像-->
        <ImageView
            android:id="@+id/iv_head"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/owl_head"
            android:layout_centerHorizontal="true"/>
        <!--手掌-->
        <ImageView
            android:id="@+id/iv_left_hand"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:src="@drawable/icon_hand"
            android:layout_alignParentLeft="true"
            android:layout_alignBottom="@+id/iv_head"
            android:layout_marginBottom="-35dp"
            />
        <ImageView
            android:id="@+id/iv_right_hand"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:src="@drawable/icon_hand"
            android:layout_alignParentRight="true"
            android:layout_alignBottom="@+id/iv_head"
            android:layout_marginBottom="-35dp"
            />
        <!--翅膀-->
        <ImageView
            android:id="@+id/iv_left_arm"
            android:layout_width="65dp"
            android:layout_height="40dp"
            android:src="@drawable/arm_left"
            android:layout_below="@+id/iv_head"
            android:layout_alignParentLeft="true"/>
        <ImageView
            android:id="@+id/iv_rigth_arm"
            android:layout_width="61dp"
            android:layout_height="40dp"
            android:src="@drawable/arm_right"
            android:layout_below="@+id/iv_head"
            android:layout_alignParentRight="true"/>
    </RelativeLayout>

    <!--输入框背景-->
    <io.alterac.blurkit.BlurLayout
        android:id="@+id/bg"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:background="@drawable/input_bg_shape"
        android:layout_centerInParent="true"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        app:blk_fps="0"
        app:blk_blurRadius="20"
        />

    <!--添加标题和输入框-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:layout_centerInParent="true"
        android:orientation="vertical"
        android:padding="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginLeft="20dp">

        <!--标题-->
        <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="炫酷登陆"
        android:textColor="#00ff00"
        android:textSize="20dp"
        android:textAlignment="center"
        android:layout_marginTop="60dp"
        />

        <!--添加输入框-->
        <EditText
            android:id="@+id/et_user"
            style="@style/EditTextStyle"
            android:hint="请输入用户名"
            android:inputType="text"

            />
        <EditText
            android:id="@+id/et_password"

            style="@style/EditTextStyle"
            android:hint="请输入密码"
            android:inputType="textPassword"
            />

        <!--添加按钮-->
        <Button
            android:id="@+id/bt_login"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:text="登陆"
            android:textColor="#ffffff"
            android:layout_marginTop="20dp"
            android:enabled="false"
            android:background="@drawable/login_btn_state"
            />
    </LinearLayout>

</RelativeLayout>

然后我们在MainActivity中对一些控件进行操作
找到控件

user=findViewById(R.id.et_user);
        password=findViewById(R.id.et_password);
        loginBtn=findViewById(R.id.bt_login);
        leftarm=findViewById(R.id.iv_left_arm);
        rightarm=findViewById(R.id.iv_rigth_arm);
        lefthand=findViewById(R.id.iv_left_hand);
        righthand=findViewById(R.id.iv_right_hand);

给控件添加监听事件

//监听内容改变 ->控制按钮的控制状态
        user.addTextChangedListener(this);
        password.addTextChangedListener(this);

判断是否需要执行捂眼睛的动画

//监听EidtText焦点的变化 ->控制是否需要捂眼睛
        password.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View view, boolean b) {

                if(b==true){
                    //捂眼睛
                    close();
                }else{
                    //打开
                    open();
                }
            }
        });

捂眼睛动画的实现
这里捂眼睛的动画有两个，一个是打开眼睛，一个是关闭眼睛

public void close(){
        //旋转翅膀
        //左翅膀
        RotateAnimation lAnim=new RotateAnimation(0,175,leftarm.getWidth(),0f);
        lAnim.setDuration(500);
        lAnim.setFillAfter(true);

        leftarm.startAnimation(lAnim);
        //右翅膀
        RotateAnimation rAnim=new RotateAnimation(0,-175,0f,0f);
        rAnim.setDuration(500);
        rAnim.setFillAfter(true);

        rightarm.startAnimation(rAnim);

        TranslateAnimation down= (TranslateAnimation) AnimationUtils.loadAnimation(this,R.anim.hand_down_translate);
        lefthand.startAnimation(down);
        righthand.startAnimation(down);
    }
    public void open(){
        //旋转翅膀
        //左翅膀
        RotateAnimation lAnim=new RotateAnimation(175,0,leftarm.getWidth(),0f);
        lAnim.setDuration(500);
        lAnim.setFillAfter(true);

        leftarm.startAnimation(lAnim);
        //右翅膀
        RotateAnimation rAnim=new RotateAnimation(-175,0,0f,0f);
        rAnim.setDuration(500);
        rAnim.setFillAfter(true);

        rightarm.startAnimation(rAnim);

        TranslateAnimation up= (TranslateAnimation) AnimationUtils.loadAnimation(this,R.anim.hand_up_translate);
        lefthand.startAnimation(up);
        righthand.startAnimation(up);
    }
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,332评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,508评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,812评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,607评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,728评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,919评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,071评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,802评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,256评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,389评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,032评论 3赞 316
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2赞 350

推荐阅读更多精彩内容

  • 2.2
    所以真的有这样的时刻，你不主动联系别人，就真的没有一个人会找你，好像全世界就剩下你是一个人了，就只有你一个人还在孤...
    逗逼不好笑阅读 191评论 0赞 0
  • 说出重点
    生活中的交谈是“小型演讲”，讲出来重点，沟通才有效果。 同事沟通时，大段语言，往往是没有耐心听的，会直接先问，需要...
    豆子121阅读 176评论 2赞 1