Foreword: Before SmartLoadingView1.0, I also posted a Nuggets. I explained the process, details and animation of customizing this View. The response is pretty good. But despite the good response from the blog, the number of stars on github is pitiful. I have not found the reason. Until recently, when refactoring MVVMdemo, I used my own controls, although there were no bugs. But the api is very difficult to use, including the method interface, which is too long. A simple function, a large piece of code. So the author spent a week to make drastic changes. Not only updated the api but also added many functions. So let's briefly introduce how to use it.
Add dependency
- The project build.gradle is added as follows
allprojects { repositories { maven { url 'https://jitpack.io' } } } - add app build.gradle as follows
dependencies { implementation 'com.github.lihangleo2:SmartLoadingView:2.0.1' }
Use (attribute description below)
<com.lihang.smartloadview.SmartLoadingView
android:id="@+id/smartLoadingView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="自带dialog按钮"
android:textColor="#fff"
android:textSize="15dp"
app:background_normal="#fff"
app:errorMsg="联网失败文案"
app:background_error="#ED7676"
app:background_cannotClick="#bbbbbb"
app:cornerRaius="30dp"
app:textScrollMode="marquee"
app:smart_clickable="true"
app:speed="400"
/>
Effect display (screenshot resolution is low, please scan the QR code below to experience the effect)
1. Turn on animation and use of transition animation
| 1.1, automatically jump after the animation ends | 1.2, monitor the animation to achieve logic by yourself |
|---|---|
1.1, automatically jump after the animation ends
The click event here is the same as the normal control click event. Just set setOnClickListener().
smartLoadingView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
smartLoadingView.start();
Observable.timer(2000, TimeUnit.MILLISECONDS)
.observeOn(AndroidSchedulers.mainThread()).subscribe(along -> {
smartLoadingView.onSuccess(MainActivity.this, SecondActivity.class);
});
}
});
Click the button to start the animation when networking starts
smartLoadingView.start();
Here I used RxJava to delay 2s to simulate the successful networking. You can also use the handler to delay the implementation of this function. Here, lambda expressions are used, which can be ignored. Just look at the following code.
//这样既可实现，从一个页面转场动画跳转到另外一个页面（注意这样跳转，第一个页面会被finish掉）。
smartLoadingView.onSuccess(MainActivity.this, SecondActivity.class);
1.2, monitor the animation to achieve logic by yourself
The previous click event and start animation are the same as 1.1. When the network connection is successful, the monitoring of the animation end is added (the logic here is handled by itself, and no page will be closed or jumped).
smartLoadingView.onSuccess(new SmartLoadingView.AnimationFullScreenListener() {
@Override
public void animationFullScreenFinish() {
Toast.makeText(MainActivity.this, "监听动画结束", Toast.LENGTH_SHORT).show();
}
});
Two, the style of network request failure
| 2.1. The request fails and the copy is displayed on the control | 2.2. The request fails and returns to the initial state |
|---|---|
2.1. The request fails and the copy is displayed on the control
The click and start animations here are the same as above. If you set a failed copy in the xml, when the network fails, you only need to call
smartLoadingView.netFaile();
Of course, if you don’t know the failed copy before connecting to the Internet, you can do the same to bring in the current failed copy
smartLoadingView.netFaile(msg);
2.2. The request fails and returns to the initial state
If your requirement is to display the failed copy in another place, or just pop a toast, the button box will return to the initial state, just this
smartLoadingView.backToStart();
3. Normal networking request (currently used by the author for attention)
| 3.1. Normal networking, normal results | 3.2. Normal network, tick the result |
|---|---|
| 3.3. Check the result, and the check disappears | 3.4. Tick the result to remind users |
3.1. Normal networking, normal results
Here the click event and start animation are the same as before. If the result is normal, you only need to use it in combination with the failed method. The failed copy and the failed background are set to a style that focuses on success. The call only needs to be like this
smartLoadingView.netFaile("关注成功");
Click again to return to the initial state. Note that backToStart() cannot be used here. Because backToStart() is used when the result is output, it won't work even if you use it. The result "Focus on Success" has already been output here. So at this time, click again, you need to be as follows
smartLoadingView.reset();
3.2. Normal network, tick the result
The previous is the same, but when the result is output, the AnimationOKListener interface is implemented
smartLoadingView.onSuccess(new SmartLoadingView.AnimationOKListener() {
@Override
public void animationOKFinish() {
Toast.makeText(MainActivity.this, "关注成功", Toast.LENGTH_SHORT).show();
}
});
3.3. Check the result, and the check disappears
If you want to achieve Douyin, after you tick it, the tick disappears, you only need to implement it and add a mode, OKAnimationType.HIDE. (Of course the above is the default OKAnimationType.NORMAL)
smartLoadingView.onSuccess(new SmartLoadingView.AnimationOKListener() {
@Override
public void animationOKFinish() {
Toast.makeText(MainActivity.this, "关注成功", Toast.LENGTH_SHORT).show();
}
}, SmartLoadingView.OKAnimationType.HIDE);
3.4. Tick the result to remind users
This is somewhat similar to the reminder effect. No matter where your control is on the screen, it will eventually run to the middle of the screen to remind the user that it was successful. Also just add a mode OKAnimationType.TRANSLATION_CENTER
smartLoadingView.onSuccess(new SmartLoadingView.AnimationOKListener() {
@Override
public void animationOKFinish() {
Toast.makeText(MainActivity.this, "关注成功", Toast.LENGTH_SHORT).show();
}
}, SmartLoadingView.OKAnimationType.TRANSLATION_CENTER);
4. If the text exceeds one line, the text will scroll automatically
The original intention of designing this is because the wrong copy of the button may be too long, and it is used when the button cannot be put down.
| 4.1, text scrolling back and forth | 4.2, imitation marquee scrolling |
|---|---|
4.1, text scrolling back and forth
Just add app:textScrollMode="normal" in the xml. Or it can be omitted, because the default scrolling is this way
4.2, imitation marquee scrolling
Only need to add app:textScrollMode="marquee" in xml
Five, set the non-clickable state
| 5.1, set non-clickable state | |
|---|---|
5.1, set non-clickable state
It can be set in xml by app:smart_clickable="false". Of course it can also be set by code
smartLoadingView.setSmartClickable(false);
6. Here the author also provides 2 small demos. Login to the demo and follow the demo
| 6.1, login demo | 6.2, follow the demo |
|---|---|
You can download the demo to view by yourself
Scanning two-dimensional experience effect (download password is: 123456)
Seven, custom attributes
Button copy
- android:text="Bring your own dialog button" uses the text attribute of textView
Button copy color value
- android:textColor="#fff" uses the textView's textColor color value attribute
Button copy font size
- android:textSize="15dp" uses the font size of textView
Background color value under normal conditions
- app:background_normal="#fff" The normal background color value of the button
Networking failure copywriting
- app:errorMsg="Network failed copy" The copy displayed when the network failed, such as the account password is wrong when logging in
Background color value under network failure
- app:background_error="#ED7676" The background color value displayed when the network fails, generally red
The background color value in the unclickable state
- app:background_cannotClick="#bbbbbb" The background color value in the non-clickable state
Fillet properties
- app:cornerRaius="30dp" The rounded corner attribute of the background
Text scroll mode (when the text exceeds one line, the text automatically scrolls)
- app:textScrollMode=“marquee” For example, after the network fails, the failed copy is too long. The text scrolls automatically, there are 2 ways. 1. Normal scroll back and forth. 2. Marquee marquee effect
Text scroll speed
- app:speed="400" The scroll speed of the text. Can be understood as the time required for a text to scroll off the screen
Button click state
- app:smart_clickable="true" When not set, clickable by default is true. The code can also be set by smartLoadingView9.setSmartClickable(false)
Let's talk about the length and width
Both the length and width use the system layout_width and layout_height, including setting padding. If not set, there is a default spacing
Eight, github address
The SmartLoadingView versions 8.1 and 1.0 have detailed explanations
- Explanation of version 1.0
- Version 2.0 has changed a lot. For example, the control inherits TextView. You don’t need to measure it yourself if you use the system’s length and width attributes. Code is getting more and more standardized
- If the response is good, the author will publish a tutorial to explain this custom View from 0. Brothers please give a thumbs up
8.2. About the author.
Android has been working for many years, and I have been longing for big manufacturers. I am lonely on the way forward. If you feel lonely on the way to study, please join me. Let us be less lonely on the road of learning
- About my experience
- QQ group: 209010674
(click the icon to join directly)