45fan.com - 路饭网

搜索: 您的位置主页 > 网络频道 > 阅读资讯:Android开发----UI配置的一些知识点

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

2019-04-19 06:18:16 来源:www.45fan.com 【

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

Android开发----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具有更高的优先级

    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>

     

     
     

    本文地址:http://www.45fan.com/a/question/100411.html
    Tags: Android 开发 ----UI
    编辑:路饭网
    关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部