Record the optimization of the complete interface
Table of contents
1. Beautify TableRow and realize the bottom border
Effect diagram:
method: create an xml file, and then refer to the xml file:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<item>
<shape>
<!-- 边框颜色-->
<solid android:color="#ebebeb" />
</shape>
</item>
<item
android:bottom="2dp"> //有四个方向可以选择，这里选择底部
<shape>
<!-- 背景颜色-->
<solid android:color="@color/lightgreen" />
</shape>
</item>
</layer-list>
Sometimes the lower border can be implemented directly with view. I don’t want to change tablelayout to linearlayout, so I don’t use this method
view method:
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="@color/lightgreen" />
2. Beautify the button
-
The background is transparent and
the shadow is canceled Rendering picture:
android:backgroundTint="#0000" android:stateListAnimator="@null" -
Click the button to change the color
effect picture
and also create an xml file
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 设置按钮圆角按钮的步骤-->
<!-- 1.设置圆角的半径-->
<!-- 2.设置按钮的颜色-->
<!-- 3.设置边框大粗细和颜色-->
<corners android:radius="10dp"/>
<solid android:color="@color/lightgreen"/>
<stroke android:width="1dp"
android:color="@color/lightgreen"/>
</shape>
Then set the format to be displayed when clicked in the code block, and the format is empty when not clicked
activity.setBackground(null);
goods.setBackground(null);
feedback.setBackground(getResources().getDrawable(R.drawable.button_shape));
- Dotted frame
rendering:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="10dp"/>
<!-- dashGap和dashWidth一起作用产生虚线效果-->
<stroke
android:dashGap="20dp"
android:dashWidth="20dp"
android:width="1dp"
android:color="@color/iconColor"/>
</shape>
- Placeholder
3. Change the icon color
Effect picture:
before change: 
after change: method: use 
it in the xml fileapp:tint="@color/alarmColor"
4. Realize that the avatar is located in the middle of the card
Effect picture:
idea: use relativeLayout layout, make the avatar below the card, and then android:layout_marginTop="-50dp"adjust the position
Problem: You will find that Imagview will be blocked by the card and cannot be displayed on top of the card
Solution: cardview reference android:elevation="10dp", the avatar is set android:elevation="20dp", that is, the value of the avatar is larger than the cardview
ps: All unnecessary nested layouts should be deleted. At the same time, it is best not to set the value of the card to 0. When I set it to 0, it will not work even if the value of the avatar is greater than 0
5. Beautification of pop-up windows
Effect picture:
ps: first create an xml file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="200dp"
android:layout_gravity="center"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:cardCornerRadius="20dp">
<RelativeLayout
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:id="@+id/card1"
android:layout_gravity="center"
android:layout_width="match_parent"
android:backgroundTint="@color/mainBackground"
android:layout_height="wrap_content"
app:cardCornerRadius="10dp">
<LinearLayout
android:id="@+id/lay"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/tv_createQRCode"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:textSize="18dp"
android:textColor="@color/textColor"
android:text="生成签到码" />
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="@color/lightgreen" />
<TextView
android:id="@+id/tv_signInForm"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:textSize="18dp"
android:textColor="@color/textColor"
android:text="下载报名表" />
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="@color/lightgreen" />
<TextView
android:id="@+id/tv_entryForm"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:textSize="18dp"
android:textColor="@color/textColor"
android:text="下载签到表" />
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="@color/lightgreen" />
<TextView
android:id="@+id/tv_delete"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:textSize="18dp"
android:textColor="#E36B6B"
android:text="删除活动" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<LinearLayout
android:layout_below="@+id/card1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_marginTop="10dp"
android:id="@+id/imageView6"
android:layout_gravity="center_horizontal"
app:tint="@color/lightgreen"
android:layout_width="30dp"
android:layout_height="30dp"
app:srcCompat="@drawable/delete_pic" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
Then click the icon to display a pop-up window at the code block:
menu.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//创建弹窗
builder = new AlertDialog.Builder(ActivityDetailActivity.this);
inflater = getLayoutInflater();
layout = inflater.inflate(R.layout.dialog_menu, null);//获取自定义布局
builder.setView(layout);//设置对话框的布局
dialog = builder.create();//生成最终的对话框
dialog.show();//显示对话框
//弹窗背景透明
dialog.setCanceledOnTouchOutside(true);
Window window = dialog.getWindow();
window.setContentView(R.layout.dialog_menu);
((Window) window).setBackgroundDrawable(new ColorDrawable(0x00000000));
WindowManager windowManager = ActivityDetailActivity.this.getWindowManager();
Display display = windowManager.getDefaultDisplay();
WindowManager.LayoutParams lp = dialog.getWindow().getAttributes();
lp.height = WindowManager.LayoutParams.MATCH_PARENT; //设置宽度
lp.width = WindowManager.LayoutParams.MATCH_PARENT; //设置宽度
// lp.gravity = Gravity.BOTTOM;
window.setGravity(Gravity.CENTER);
dialog.getWindow().setAttributes(lp);
}
}
ps: But in fact, I want to realize that the pop-up window is at the lowest end of this piece of code, but I don’t know why Gravity.Bottom doesn’t work. Later, I changed the position of the pop-up window in the xml file to realize the position change, but By mistake, the background is transparent
pps: If the position of the pop-up window remains unchanged, try to check whether the width and height of the xml match_parent, otherwise the position of the pop-up window may not change.
pps: If dialog.setCanceledOnTouchOutside(true)it doesn't work , you can try to modify the width and height, (I found that it's okay to not set the width and height directly) Reference article: Android Dialog setCanceledOnTouchOutside(ture) invalid problem
ppps: I found that sometimes after setting this way, the click on the pop-up window will not work. At this time, just comment it window.setContentView(R.layout.dialog_menu);out.
6. editText beautification
Remove the underline of editText:
two methods, one is to set the background to @null, the second method: to set the background to 00FFFFFF.
7. Use of cards
- Add shadows:
app:cardElevation="@dimen/fab_margin"
Experience summary:
- If it involves the size and color of many controls, try to use the reference method, that is, use @color/viewColor instead of directly #FFFFFF, because it is more convenient to modify later, without modifying one by one
- It is best to use relativelayout for layout (I think it is the most convenient)