Android开发----UI配置的一些知识点

其他 2019-04-17 16:20:51 阅读次数: 0

由于本人在自学Android开发，所以准备记下学习过程中的一些琐碎的知识点，本篇文章主要是介绍一些UI方面的知识点，（登录界面）总的UI实现效果如下，自行与下述各部分一一对应

一.设置statusBar的颜色

  • 先在app/res/values/color.xml中，添加自定义的颜色变量
    <color name="colorStatusBar">#EBBD16</color>
  • 打开app/res/values/style.xml，将原先的
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>

  改为我们设计的颜色：

        <item name="colorPrimaryDark">@color/colorStatusBar</item>

  或者直接增加一条item

<item name="android:statusBarColor">@color/colorStatusBar</item>

  当item<android:statusBarColor>和item<colorPrimaryDark>同时出现时，前者优先级更高，会覆盖后者的设置

colorPrimaryDark和statusBarColor两者的异同点：

相同点：

都用来修改StatusBar的颜色

Android5.0以上才支持的

不同点：

statusbarColor具有更高的优先级

扫描二维码关注公众号，回复： 5923509 查看本文章

statusBarColor在Android5.0以下会出现警告提示

默认情况下，statusBarColor的值会继承自colorPrimaryDark

 二.欢迎界面的逻辑

     设置欢迎界面在一定的延迟时间后，跳转到指定界面的步骤：

     （1）创建Timer对象

     （2）调用Timer的schedule，重写TimerTask并设置延迟时间

        private Timer skipTimer;
        skipTimer = new Timer();
        skipTimer.schedule(new TimerTask() {
            @Override
            public void run() {
                Intent intent = new Intent(WelcomeActivity.this,XXXActivity.class);
                //XXXActivity为指定的跳转Activity
                startActivity(intent);
            }
        },3 * 1000);

 三.NavigationBar

      在app/src/main/res/layout中创建nav_bar.xml，代码自定义如下：

      

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/navBarHeight"
    android:background="@color/mainColor"
    android:paddingLeft="@dimen/marginSize"
    android:paddingRight="@dimen/marginSize">
    
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src = "@mipmap/back"
        android:layout_gravity="center_vertical"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="@dimen/navBarTitleSize"
        android:textColor="@android:color/white"
        android:text="@string/initNavBarTitle"
        android:layout_gravity="center"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/me"
        android:layout_gravity="right|center_vertical"/>

</FrameLayout>

    其中@mimap/back和@mimap/me为app/src/main/res/mipmap-hdpi下的自己引入的图片

    @string/initNavBarTitle为app/src/main/res/values/string.xml下定义的字符串变量

    <string name="initNavBarTitle">测试</string>

    @dimen/navBarTitleSize、@dimen/navBarHeight、@dimen/marginSize为app/src/main/res/values/dimen.xml中自定义的变量，其中 @dimen/navBarTitleSize为navigationBar中的TextView的文本大小，@dimen/navBarHeight为navigationBar的高度，@dimen/marginSize为navigationBar的内间距，

定义示例：

    <dimen name="navBarHeight">56dp</dimen>
    <dimen name="marginSize">12dp</dimen>
    <dimen name="navBarTitleSize">22sp</dimen>

   在其他界面引入布局文件中，只需使用include方法，示例如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".activities.LoginActivity">

    <include layout="@layout/nav_bar"/>


</LinearLayout>

 四.自定义View（自定义登录框）

   1.自定义属性

         （1）确定需要自定义的属性后，在app/main/res/values中新建一个命名为attrs的xml文档（如果已经存在则不需要重新创建）

         （2）添加自定义变量

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--声明样式-->
    <declare-styleable name="inputView">
        <!--声明变量-->
        <!--输入框前面的小图标-->
        <attr name="input_icon" format="reference"></attr>
        <!--输入框内的提示内容-->
        <attr name="input_hint" format="string"></attr>
        <!--输入框内容是否需要以密文形式展示-->
        <attr name="is_password" format="boolean"></attr>
    </declare-styleable>
</resources>

   2.自定义控件

         （1）代码

                  创建一个InputView继承FrameLayout，然后重写方法，并且绑定自定义布局和布局关联自定义属性，代码如下

import android.content.Context;
import android.content.res.TypedArray;
import android.os.Build;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.annotation.RequiresApi;
import android.text.InputType;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.EditText;
import android.widget.FrameLayout;
import android.widget.ImageView;

import com.musicplaer.eminemmusic.R;

/**自定义控件
 * 以下是自定义的属性：
 * input_icon：输入框前的提示图标
 * input_hint：输入框内的提示文字
 * is_password：确定输入框的内容需不需要以密文的形式展示
 */
public class InputView extends FrameLayout {
    //声明与自定义属性相对应的变量\
    private int inputIcon;
    private String inputHint;
    private boolean isPassword;

    //控件
    private View mView;
    private ImageView iv_icon;
    private EditText ed_input;

    public InputView( @NonNull Context context) {
        super(context);
        init(context,null);
    }

    public InputView( @NonNull Context context,  @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context,attrs);
    }

    public InputView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context,attrs);
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public InputView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init(context,attrs);
    }

    /**
     * 初始化方法
     * @param context 上下文组件
     * @param attrs  自定义变脸
     */
    private void init(Context context,AttributeSet attrs){
        if(attrs == null){
            return;
        }

        //获取自定义属性
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.inputView);
        inputIcon = typedArray.getResourceId(R.styleable.inputView_input_icon,R.mipmap.logo);
        inputHint = typedArray.getString(R.styleable.inputView_input_hint);
        isPassword = typedArray.getBoolean(R.styleable.inputView_is_password,false);
        typedArray.recycle();//方便后期再次调用，相当于清空的功能


        //绑定layout布局
        mView = LayoutInflater.from(context).inflate(R.layout.input_view,this,false);
        iv_icon = mView.findViewById(R.id.iv_icon);
        ed_input = mView.findViewById(R.id.ed_input);

        //布局关联属性
        iv_icon.setImageResource(inputIcon);
        ed_input.setHint(inputHint);
        ed_input.setInputType(isPassword ? InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD : InputType.TYPE_CLASS_PHONE);

        //添加视图
        addView(mView);

    }


    //获取自定义View的输入内容
    public String getInputStr(){
        return ed_input.getText().toString().trim();
    }
}

         （2）View布局

               在app/src/main/res/layout中创建input_view.xml

<?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="@dimen/inputViewHeight"
    android:orientation="horizontal"
    android:gravity="center_vertical"
    android:paddingRight="@dimen/marginSize"
    android:paddingLeft="@dimen/marginSize">

    <ImageView
        android:id="@+id/iv_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/phone"/>

    <EditText
        android:id="@+id/ed_input"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:hint="@string/username"
        android:background="@null"
        android:paddingLeft="@dimen/marginSize"
        android:paddingRight="@dimen/marginSize"
        android:textSize="@dimen/inputTextView"/>

</LinearLayout>

         （2）添加自定义View，"android:"是使用系统定义属性时使用，"app:"使用自定义属性时使用

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".activities.LoginActivity">

    <include layout="@layout/nav_bar"/>

    <ImageView
        android:layout_width="295dp"
        android:layout_height="235dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="@dimen/marginSize"
        android:src="@mipmap/logo" />

    <com.musicplaer.eminemmusic.views.InputView
        android:layout_width="match_parent"
        android:layout_height="@dimen/inputViewHeight"
        android:layout_marginTop="@dimen/marginSize"
        app:input_icon="@mipmap/phone"
        app:input_hint="@string/phone"
        app:is_password="false">

    </com.musicplaer.eminemmusic.views.InputView>
</LinearLayout>

 四.自定义全局控件（区别于自定义View）

     在app/src/main/res/values/styles.xml中中添加自定义控件，下文分别为，自定义直线和自定义按钮格式的style标签

    <!--定义分割线-->
    <style name="line">
        <item name="android:layout_height">1dp</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:background">@color/lineColor</item>
        <item name="android:layout_margin">@dimen/marginSize</item>
    </style>

    <!--登录注册按钮-->
    <style name="commitButton">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">@dimen/commitButtonHeight</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="android:textSize">@dimen/textSize</item>
        <item name="android:layout_marginLeft">@dimen/marginSize</item>
        <item name="android:layout_marginRight">@dimen/marginSize</item>
        <item name="android:gravity">center</item>
        <!--背景颜色要实现点击和未点击的区别-->
        <item name="android:background">@drawable/btn_commit_selector</item>
    </style>

五.自定义控件颜色和形状

     上面代码中的@drawable/btn_commit_selector是自定义的空间颜色，在该xml中设定了控件在不同情况下的不同显示结果，该xml的路径为app/src/main/res/drawable/btn_commit_selector，代码如下

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">

    <!--View处于高亮状态-->
    <item android:state_focused="true"
        android:drawable="@drawable/commit_btn_h"/>

    <item android:state_pressed="true"
        android:drawable="@drawable/commit_btn_h"/>

    <item android:state_selected="true"
        android:drawable="@drawable/commit_btn_h"/>

    <!--View处于默认状态-->
    <item android:drawable="@drawable/commit_btn_n"/>
</selector>

        @drawable/commit_btn_n和@drawable/commit_btn_h为按钮默认和高亮两种情况下对应的空间形状，对应如下

@drawable/btn_commit_n

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--实体颜色-->
    <solid android:color="@color/mainColor"/>

    <!--弧度-->
    <corners android:radius="@dimen/radius"/>

</shape>

@drawable/btn_commit_h

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--实体颜色-->
    <solid android:color="@color/mainColorH"/>

    <!--弧度-->
    <corners android:radius="@dimen/radius"/>

</shape>

六.用户输入合法性验证

      由于在登录注册时，都要把用户填写的数据传送要服务器进行验证，所以如果在客户端先进行用户输入合法性验证，那么就可以减少原先用来传送不合法数据的资源，使得资源利用率更高。

      第三方包地址为：https://github.com/Blankj/AndroidUtilCode

      由此使用AndroidUtilCode包来进行验证,步骤如下

      （1） 引入第三方库

                 在当前模块的build.gradle中引入第三方库

    implementation 'com.blankj:utilcode:1.23.7'

      （2）初始化AndroidUtilCode

                 使用AndroidUtilCode库要先初始化，初始化方法为Utils.init(Application)，所以在我们自定义的Application中初始化

public class MyApplication extends Application {

    @Override
    public void onCreate(){
        super.onCreate();

        //初始化第三方AndroidUtilCode包：Utils.init(application)
        Utils.init(this);
    }
}

      （3） 创建静态类方法，用于传入参数进行验证

                 由于验证手机号输入合法性和密码合法性是全局使用的方法，所以新创建一个全局静态类，在其中创建静态方法，以供调用验证

public class UserUtils {
    /**
     * 验证登录用户输入的合法性
     */
    public static boolean validateLogin(Context context,String phone,String password){
        //精确地匹配手机号码
        if(!RegexUtils.isMobileExact(phone)){
            Toast.makeText(context,"无效手机号",Toast.LENGTH_SHORT).show();
            return false;
        }
        //验证输入密码是否为空
        if(TextUtils.isEmpty(password)){
            Toast.makeText(context,"请输入密码",Toast.LENGTH_SHORT).show();
            return false;
        }

        return true;
    }
}

      （4） 验证手机号提供了"简单"和"精确"两种方法

                 AndroidUtilCode提供的验证手机号码的犯法有两种RegexUtils.isMobileExact()和RegexUtils.isMobileSimple()：前者是精准匹配（即确认已发布的码段）,而后者是简单匹配（即验证输入手机号是否为1开头且11位），两者主要的区别就是内部调用的正则表达式不同

七.Activity过渡动画分类

        定义全局动画的步骤：

        1. 自定义动画

               在app/src/main/res/anim（没有便自己创建）下，创建动画

  • open_enter
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!--平移-->
    <translate
        android:fromXDelta="100%"
        android:toXDelta="0%"
        android:duration="@integer/animation_time"/>
</set>

              android:fromXDelta="100%"表示activity的起始位置为最右边，android:toXDelta="0%"表示activity的停止位置为最左边，android:duration为动画时间，@integer/animation_time为我们自己在app/src/main/res/values/integers.xml下自定义的变量的

<integer name="animation_time">2000</integer>

  • open_exit

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!--缩放-->
    <scale
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="0.8"
        android:toYScale="0.8"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="@integer/animation_time"/>
</set>

       android:fromXScale、android:fromYScale为原始尺寸Y，android:toXScale、android:toYScale为缩放尺寸；android:pivotX，android:pivotY指定缩放中心，这里指明缩放中心是界面中心

  • close_exit

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!--平移-->
    <translate
        android:fromXDelta="0%"
        android:toXDelta="100%"
        android:duration="@integer/animation_time"/>
</set>

  • close_enter

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!--缩放-->
    <scale
        android:fromXScale="0.8"
        android:fromYScale="0.8"
        android:toXScale="1.0"
        android:toYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="@integer/animation_time"/>
</set>

       2. 定义全局动画的步骤：     在app/src/main/res/values/styles.xml定义劝酒全局动画AnimationActivity

      （1）打开Activity时

  •  新进入的Activity执行动画
  • 原activity执行动画

      （2）退出Activity时

  • 退出Activity执行动画
  • 重新进入的activity执行动画
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorStatusBar</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowAnimationStyle">@style/AnimationActivity</item>
    </style>
    
    <!--定义全局动画-->
    <style name="AnimationActivity"   parent="android:style/Animation.Activity">

        <!--打开Activity时，新进入的Activity执行动画-->
        <item name="android:activityOpenEnterAnimation">@anim/open_enter</item>
        <!--打开Activity时，退出的Activity执行动画-->
        <item name="android:activityOpenExitAnimation">@anim/open_exit</item>

        <!--退出Activity时，退出Acitivity执行的动画-->
        <item name="android:activityCloseExitAnimation">@anim/close_exit</item>
        <!--退出Activity时，进入的Acitivity执行的动画-->
        <item name="android:activityCloseEnterAnimation">@anim/close_enter</item>
    </style>

猜你喜欢

转载自blog.csdn.net/weixin_39071173/article/details/89290531
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022