效果图
总体的需求:
首先做了一个自定义view实现箭头沿着圆圈滚动的动画,在加速到一定程度的时候进行跳转,进入数据展示页面,点击指定的条目下载对应的视频,下载完成后自动跳转进行视频播放
代码流程我就按我做的工程顺序贴出来了
这个工程用的MVP模式,先创建一个model,view,presenter
一.自定义View
activity_main.xml 动画布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.test.MainActivity">
<Button
android:id="@+id/set_color_btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:onClick="onClick"
android:text="设置颜色" />
<Button
android:id="@+id/add"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/set_color_btn"
android:layout_centerHorizontal="true"
android:onClick="add"
android:text="加速" />
<Button
android:id="@+id/slow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/add"
android:layout_centerHorizontal="true"
android:onClick="slow"
android:text="减速" />
<Button
android:id="@+id/pause_or_start"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/slow"
android:layout_centerHorizontal="true"
android:onClick="pauseOrStart"
android:text="暂定/开始" />
<com.bwie.zhou3.view.MyCircleView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/my_view"
android:layout_centerInParent="true"
app:circlr_bound_color="@color/colorAccent"
app:circlr_bound_width="3dp"
/>
</RelativeLayout>
在values建一个attrs.xml,写一下样式
<resources>
<declare-styleable name="MyCustomCircleArrowView">
<attr name="circlr_bound_width" format="dimension"></attr>
<attr name="circlr_bound_color" format="color"></attr>
</declare-styleable>
</resources>
MainActivity.java
public class MainActivity extends AppCompatActivity {
//声明全局变量
private MyCircleView my_view;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//找控件
my_view = (MyCircleView) findViewById(R.id.my_view);
}
public void onClick(View view){
my_view.setColor(Color.BLUE);
}
public void add(View view){
my_view.speed();
}
public void slow(View view){
my_view.slowDown();
}
public void pauseOrStart(View view){
my_view.pauseOrStart();
}
}
MyCircleView类(里边是绘圆,还有动画指令和效果)
import android.content.Context;
import android.content.Intent;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
import android.widget.Toast;
import com.test.R;
import com.test.SecondActivity;
public class MyCircleView extends View{
//当前画笔画圆的颜色
private int CurrenCircleBoundColor;
private Paint paint;
从xml中获取的颜色
private int circleBundColor;
private float circleBoundWidth;
private float pivotX;
private float pivotY;
private float radius=130;
private float currentDegree=0;
private int currentSpeed=1;
private boolean isPause=false;
public MyCircleView(Context context) {
super(context);
initView(context);
}
public MyCircleView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
initView(context);
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MyCustomCircleArrowView);
for (int i = 0; i < typedArray.getIndexCount(); i++) {
//就是我们自定义的属性的资源id
int attr = typedArray.getIndex(i);
switch (attr){
case R.styleable.MyCustomCircleArrowView_circlr_bound_color:
circleBundColor = typedArray.getColor(attr, Color.RED);
CurrenCircleBoundColor=circleBundColor;
break;
case R.styleable.MyCustomCircleArrowView_circlr_bound_width:
circleBoundWidth = typedArray.getDimension(attr, 3);
break;
}
}
}
public MyCircleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView(context);
}
private void initView(Context context){
paint = new Paint();
}
public void setColor(int color){
if (CurrenCircleBoundColor!=color){
CurrenCircleBoundColor=color;
}else {
CurrenCircleBoundColor=circleBundColor;
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
paint.setAntiAlias(true);
paint.setColor(CurrenCircleBoundColor);
paint.setStrokeWidth(circleBoundWidth);
paint.setStyle(Paint.Style.STROKE);
pivotX = getWidth() / 2;
pivotY = getHeight() / 2;
canvas.drawCircle(pivotX,pivotY,radius,paint);
canvas.save();
//旋转画布 , 如果旋转的的度数大的话,视觉上看着是旋转快的
canvas.rotate(currentDegree,pivotX,pivotY);
//提供了一些api可以用来画线(画路径)
Path path = new Path();
//从哪开始画 从A开始画
path.moveTo(pivotX+radius,pivotY);
//从A点画一个直线到D点
path.lineTo(pivotX+radius-20,pivotY-20);
//从D点画一个直线到B点
path.lineTo(pivotX+radius,pivotY+20);
//从B点画一个直线到C点
path.lineTo(pivotX+radius+20,pivotY-20);
//闭合 -- 从C点画一个直线到A点
path.close();
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.BLACK);
canvas.drawPath(path,paint);
canvas.restore();
//旋转的度数一个一个度数增加, 如果乘以一个速度的话,按一个速度速度增加
currentDegree+=1*currentSpeed;
if (!isPause){
invalidate();
}
}
public void speed(){
++currentSpeed;
if (currentSpeed>=5){
currentSpeed=5;
Toast.makeText(getContext(),"我比闪电还快",Toast.LENGTH_SHORT).show();
//加速到一定程度跳转
getContext().startActivity(new Intent(getContext(), SecondActivity.class));
}
}
public void slowDown(){
--currentSpeed;
if (currentSpeed<=1){
currentSpeed=1;
}
}
public void pauseOrStart(){
//如果是开始状态的话去重新绘制
if (isPause){
isPause=!isPause;
invalidate();
}else {
isPause=!isPause;
}
}
}
二.进行网络请求数据
导入依赖(一次性把工程里需要的都粘出来了)
ButterKnife还需要配置别的依赖,就不多说了,自行百度
//banner
compile 'com.youth.banner:banner:1.4.9'
compile 'com.github.bumptech.glide:glide:3.7.0'
//ButterKnife
compile 'com.jakewharton:butterknife:8.4.0'
apt 'com.jakewharton:butterknife-compiler:8.4.0'
//Retrofit
compile 'com.android.support:design:23.4.0'
compile 'com.android.support:design:23.4.0'
compile 'com.squareup.retrofit2:retrofit:2.0.1'
compile 'com.squareup.retrofit2:converter-gson:2.0.1'
compile 'com.squareup.retrofit2:adapter-rxjava:2.0.1'
compile 'io.reactivex:rxandroid:1.1.0'
//RecyclerView
compile 'com.android.support:mediarouter-v7:25.0.0'
compile 'com.android.support:appcompat-v7:25.0.0'
compile 'com.android.support:recyclerview-v7:25.0.0'
//Fresco
compile 'com.facebook.fresco:fresco:0.12.0'
//编译ijkplayer-java-release.aar文件
compile(name: 'ijkplayer-java-release', ext: 'aar')
清单文件的权限
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
请求网络的主布局(上边一个banner轮播图,下边一个recyclerview列表展示)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_second"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.test.SecondActivity">
<com.youth.banner.Banner
android:id="@+id/mybanner"
android:layout_width="match_parent"
android:layout_height="200dp">
</com.youth.banner.Banner>
<android.support.v7.widget.RecyclerView
android:layout_below="@+id/mybanner"
android:id="@+id/recyclerview"
android:dividerHeight="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
banner图用到一个图片加载类GlideImageLoader
public class GlideImageLoader extends ImageLoader {
@Override
public void displayImage(Context context, Object path, ImageView imageView) {
Glide.with(context).load(path).into(imageView);
}
}
Recyclerview的子布局item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fresco="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/my_image_view"
android:layout_width="130dp"
android:layout_height="130dp"
fresco:placeholderImage="@mipmap/icon_progress_bar"
/>
<TextView
android:id=