Android UI设计

1. TextView

<TextView
        android:id="@+id/tv_one"//控件的唯一标识
        android:text="@string/one"
        android:textStyle="bold"
        android:textColor="@color/colorAccent"//不能直接给coolor赋值 #FF000000 而是链接到 res/value/colors.xml 目录下的资源统一管理
        android:textSize="20sp"
        android:background="@color/colorPrimary"
        android:gravity="center"
        android:shadowColor="@color/colorPrimaryDark"
		android:shadowDx="10.0"
		android:shadowDy="10.0"
		android:shadowRadius="3.0"
        android:layout_width="200dp"
        android:layout_height="200dp"></TextView>

<TextView
    android:id="@+id/tv_one"
    android:singleLine="true"
    android:ellipsize="marquee"
    android:marqueeRepeatLimit="marquee_forever"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:background="@color/colorPrimary"
    android:gravity="center"
    android:shadowColor="@color/colorPrimaryDark"
    android:shadowDx="10.0"
    android:shadowDy="10.0"
    android:shadowRadius="3.0"
    android:text="@string/one"
    android:textColor="@color/colorAccent"
    android:textSize="20sp"
    android:textStyle="bold">
    <requestFocus/> 获取焦点
</TextView>

marquee n 跑马灯
ellip size n 省略号大小
shadow 阴影
orientation n. 方向；定向；适应；情况介绍
vertical adj. 垂直的，直立的；[解剖] 头顶的，顶点的
horizontal adj. 水平的；地平线的；同一阶层的

drawable adj. 可拉的，可曳的
item n. 条款，项目；一则；一件商品（或物品）
tint n. 色彩；浅色

2. Button

<Button
	android:layout_width="200dp"
	android:layout_height="100dp"
	android:background="@drawable/btu_selector"
	android:backgroundTint="@color/btn_color_selector"
	android:foreground="@color/colorAccent"
	android:text="我是按钮" />

foreground 前景色设置了会掩盖字体

background 设置了背景选择器

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

按下显示 ic_account_balance_black_24dp 图片

backgroundTint 设置了颜色选择器

<item android:color="#ffff0000" android:state_pressed="true"/>
<item android:color="#ff00ff00" />

按下显示 #ffff0000（红）

1.2.1 Button事件处理

点击事件
长按事件
触摸事件

View btn_one = findViewById(R.id.btn_one);
        //点击事件
       btn_one.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               Log.e(TAG, "onClick: ");
           }
       });

       //长按事件
       btn_one.setOnLongClickListener(new View.OnLongClickListener() {
           @Override
           public boolean onLongClick(View v) {
               Log.e(TAG, "onLongClick: " );
               return false;
           }
       });

       //触摸事件
       btn_one.setOnTouchListener(new View.OnTouchListener() {
           @Override
           public boolean onTouch(View v, MotionEvent event) {
               Log.e(TAG, "onTouch: " +event.getAction());
               return false;
           }
       });

3. EditText

<EditText
    android:id="@+id/user"
    android:hint="请输入用户名（电话）"
    android:drawableLeft="@drawable/ic_person_black_24dp"
    android:drawablePadding="20dp"
    android:paddingLeft="10dp"
    android:background="@color/colorPrimaryDark" 
    android:textColorHint="#95a1aa"  //灰色
    android:inputType="phone"
    android:layout_width="200dp"
    android:layout_height="100dp"/>
<EditText
    android:id="@+id/psw"
    android:hint="请输入密码"
    android:drawableLeft="@drawable/ic_person_black_24dp"
    android:drawablePadding="20dp"
    android:paddingLeft="10dp"
    android:background="@color/colorPrimaryDark"
    android:textColorHint="#95a1aa"
    android:inputType="textPassword"
    android:layout_width="200dp"
    android:layout_height="100dp"/>
<Button
    android:id="@+id/btn_user"
    android:text="登录"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
<Button
    android:id="@+id/btn_reg"
    android:text="注册"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

获取输入的用户名

public class MyEditText extends AppCompatActivity {

    private EditText user;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my_edit_text);

        Button btn_user = findViewById(R.id.btn_user);//点击登录按钮，得到用户名
        user = findViewById(R.id.user);//用户名的对象

        btn_psw.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String text = user.getText().toString();
                Log.e("leo", "用户名 "+text);//打印用户名字
            }
        });
    }
}

4. ImageView

scaleType 尺寸类型属性

1.<ImageView
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:scaleType="center"
    android:src="@drawable/meinv"
     />


2.<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="center"
    android:src="@drawable/meinv" />

3.<ImageView
	android:src="@drawable/meinv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:maxHeight="200dp"
    android:maxWidth="200dp"
    android:adjustViewBounds="true" />

layout_editor_absoluteY Y方向偏移

![image-20210317194022243](Android 基础课程.assets/image-20210317194022243.png)

5. ProgressBar

android: max 进度条的最大值
android : progress 进度条已经完成值
android : indeterminate 如果设置成true，则进度条不精确显示进度
style = "?android:attr/progerssBarStyleHorizontal" 水平进度条

默认进度条

<ProgressBar
        android:id="@+id/pb"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

按钮控制显示进度条和隐藏进度条

<Button
        android:onClick="leoClick"
        android:text="显示隐藏进度条"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
        
 public void leoClick(View view) {
        if(progressBar.getVisibility() == View.GONE){
            progressBar.setVisibility(View.VISIBLE);
        }else {
            progressBar.setVisibility(View.GONE);
        }

    }

按钮控制进度条的精度增加

<ProgressBar
        android:id="@+id/pb2"
        style="?android:attr/progressBarStyleHorizontal"
        android:max="100"
        android:layout_width="300dp"
        android:layout_height="wrap_content"/>
            
            
public void loder(View view) {
        int progress = progressBar2.getProgress();
        progress += 10;
        progressBar2.setProgress(progress);
    }

水平进度条不显示精度

style="?android:attr/progressBarStyleHorizontal"

6. Notification 与 NotificationManager 通知

要想实现通知必须创建两个对象，一个是Notification 和 NotificationManger 对象

1. 得到NotificationManger对象。

Notification Manager 类是一个通知管理器类，这个对象是由系统维护的服务，是以单例模式的方式获得，所以一般并不直接实例化这个对象。在Activity中，可以使用Activity.getSystemService(String)方式获取NotificationManger对象，Activity.getSystemService(String) 方法可以通过Android系统服务的句柄，返回对应的对象。在这里需要返回NotificationManager，所以直接传递Context.NOTICATION_SERVICE即可。

private NotificationManager manager;
//实现notificationManager
        manager = (NotificationManager)getSystemService(NOTIFICATION_SERVICE);

2. 设置通知类型

NotificationChannel channel = new NotificationChannel("leo", "测试通知", NotificationManager.IMPORTANCE_HIGH);//开启通知，会弹出，发出提示音，状态栏显示
manager.createNotificationChannel(channel);

3. 得到Notification对象

使用NotificationCompat类的Builder构造器来创建Notification对象，可以保证程序在所有的版本上都能正常工作。

Android5.0系统开始，对于通知栏图片的设计进行了修改，现在Google要求，所有应用程序的通知栏图标，应该只使用alpha图层（黑白），来进行绘制，而不应该包括RGB图层

private Notification notification;
// leo渠道id，必须和渠道匹配
notification = new NotificationCompat.Builder(context:this,channelld:"leo")
//前三个必须设置
    			.setContentTitle("官方通知")
                .setContentText("世界那么大")
                .setSmallIcon(R.drawable.ic_person_black_24dp)//alpha图层
             .setLargeIcon(BitmapFactory.decodeResource(getResources(),R.drawable.notification))
                .setColor(Color.parseColor("#ffff0000"))  //颜色
                .setContentIntent(pendingIntent)//跳转Activity，跳转示意图
                .setAutoCancel(true)//点击通知后自动被清除
                .build();

4. 设置跳转的Activity

Intent intent = new Intent(this, NotificationActivity.class);
PendingIntent pendingIntent = PendingIntent.getActivity(this,0, intent,0);
===============Activity======================
    public class NotificationActivity extends Activity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Log.e("leo","on creat :进入NotificationActivity");
    }
}

5. 设置按钮

5.1 发出通知按钮

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="sendNotification"
        android:text="发出通知"/>
        
       ================Java=====================
       public void sendNotification(View view) {
        manager.notify(1,notification);
    }

5.2 取消通知按钮

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="cacelNotification"
        android:text="取消发送"/>
=======================Java============================
public void cacelNotification(View view) {
        manager.cancel(1);
    }

compat n. 兼容
Content n. 内容，目录；满足；容量
icon n 图标
intent n. 意图；目的；含义
notify vt. 通告，通知；公布

7. Toolbar

设置的是 androidx的 Toolbar

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="42dp"
    android:background="#ffff00"
    app:logo="@drawable/ic_launcher_background"
    app:navigationIcon="@drawable/ic_arrow_back_black_24dp"// 返回
    app:subtitle="子标题"
    app:subtitleTextColor="#00ff00"
    app:title="标题"
    app:titleMarginStart="10dp"
    app:titleTextColor="#ff0000" />

点击事件：

 Toolbar toolbar = findViewById(R.id.toolbar);

         toolbar.setNavigationOnClickListener(new View.OnClickListener() {
             @Override
             public void onClick(View v) {
                 Log.e("leo","onClick:toolbar被点击了");
             }
         });
    }

设置文本在中间

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar2"
    android:layout_width="match_parent"
    android:layout_height="42dp"
    android:background="#ffff00"
    app:logo="@drawable/ic_launcher_background"
    app:navigationIcon="@drawable/ic_arrow_back_black_24dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity = "center"
        android:textSize="30dp"
        android:text="标题"/>

</androidx.appcompat.widget.Toolbar>

8. AlertDialog

1. 设置View 并设计Button点击事件

<LinearLayout
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android" >

    <Button
        android:text="显示对话框"
        android:onClick="leoClick"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    
</LinearLayout>

2.在点击事件里面创建AlertDialog.builder对象并设置属性

注意：

set....方法返回的是builder 顺序随便

.create().show();//返回为 AlertDialog 必须放在最后.setView 方法

新建dialogview

<ImageView
        android:src="@mipmap/ic_launcher"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <TextView
        android:text="哈哈哈，天气不错"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

传入 view

View diagview = getLayoutInflater().inflate(R.layout.dialog_view, null);

```
.setView(diagview)
```

 public void leoClick(View view) {

        View diagview = getLayoutInflater().inflate(R.layout.dialog_view, null);

        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setIcon(R.mipmap.ic_launcher)
                .setTitle("我是对话框")
                .setMessage("今天的天气怎摸样？")//返回值为builder
                .setView(diagview)
                .setPositiveButton("确定按钮", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        Log.e("leo","点击了确定");
                    }
                })
                .setNegativeButton("取消按钮", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        Log.e("leo","点击了取消");
                    }
                })
                .setNeutralButton("中间按钮", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        Log.e("leo","点击了中间");
                    }
                })

                .create()//返回为 AlertDialog
                .show();
    }

9. Popwindow

1. 设置一个按钮点击事件，弹出PopupWindow

<Button
        android:text="弹出PopupWindow"
        android:onClick="LeoClick"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

2. 设置PopupWindow（）

弹出popupView , 长，宽，设置焦点。
设置背景
显示（show）

PopupWindow popupWindow = new PopupWindow(popupView, ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT,true);
		 popupWindow.setBackgroundDrawable(getResources().getDrawable(R.drawable.meinv));

popupWindow.showAsDropDown(view,view.getWidth(),view.getHeight());

3. 给弹出的view设置按钮

设置弹出的view

<Button
    android:id="@+id/btn1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="5dp"
    android:text="上海"
    android:textSize="18sp"/>
<Button
    android:id="@+id/btn2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="5dp"
    android:text="北京"
    android:textSize="18sp"/>

得到view 对象并得到按钮对象

View popupView = getLayoutInflater().inflate(R.layout.popup_window,null);

Button btn1 = popupView.findViewById(R.id.btn1);
Button btn2 = popupView.findViewById(R.id.btn2);

设置按钮监听事件

dismiss（）关闭popupwindow窗口

btn1.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Log.e("leo","你在上海吗？");
        popupWindow.dismiss();
    }
});
btn2.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Log.e("leo","你在北京吗？");
        popupWindow.dismiss();

    }
});

相关阅读:
《AngularJS》5个实例详解Directive（指令）机制
 angularjs入门学习【指令篇】
--@angularJS--综合小实例1
--@angularJS--angular与BootStrap3的应用
 --@angularJS--ng-show应用
 --@angularJS--浅谈class与Ng-Class的应用
 --@angularJS--路由插件UI-Router
--@angularJS--路由、模块、依赖注入
 Bootstrap兼容IE8
ANGULAR JS PROMISE使用
原文地址：https://www.cnblogs.com/AronJudge/p/14649052.html