Android自定义控件(一)实现Banner,指示点滑动

一.简单的描述自定义控件
自定义控件:
系统的控件满足不了我们的需求,需要自己定义控件。
方式:1.组合方式 (用系统控件拼接功能)
2.继承方式 (在已有的控件基础上添加新的功能)
3.自绘方式 (自己画内容)

二.Demo
一.首先使用未封装的方式写(如果对Banner封装的感兴趣的,可以看看我的下一篇Android自定义控件(二)https://blog.csdn.net/weixin_44614751/article/details/102530683)
这大多数学习的人一开始会这样写的,缺点是可移植性差
实现的效果图:
Android自定义控件(一)实现Banner,指示点滑动_第1张图片
全部代码

package com.example.pxdbanner;

import androidx.appcompat.app.AppCompatActivity;

import android.media.Image;
import android.os.Bundle;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {
    private int numberOfPages = 5;
    private  int currentPage = 0;
    private   LinearLayout container;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //获取xml中配置的线性布局容器
        container = findViewById(R.id.ll_container);
        //在容器中添加内容 -->View
        for (int i = 0; i < numberOfPages; i++) {
            //创建视图控件
            ImageView dotView = new ImageView(this);
            //配置显示模样风格  可使用Shape
            int dp = 0;
            if (i == 0) {
                dotView.setBackgroundResource(R.drawable.dot_red_shape);
            }else {
                dotView.setBackgroundResource(R.drawable.dot_gray_shape);
                dp = 10;
            }
            //给控件添加左间距
            //每一种控件都有对应的params
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams
                    (ViewGroup.LayoutParams.WRAP_CONTENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT);
            //设置垂直居中 设置属性就到params
            params.gravity = Gravity.CENTER_VERTICAL;
            //第二个开始才需要间距
            params.leftMargin = dpToPixel(dp);//密度 2 10pix 5dp
            //添加到容器中
            container.addView(dotView,params);
        }
    }
    private int dpToPixel(int dp){
       float density = getResources().getDisplayMetrics().density;
       return (int)(density*dp);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN){
            //还原原来的
            //找到page对应的控件
           ImageView dotView = (ImageView) container.getChildAt(currentPage);
           dotView.setBackgroundResource(R.drawable.dot_gray_shape);
            //切换指示器
            if (currentPage < numberOfPages-1){
                currentPage++;
            }else {
                currentPage = 0;
            }
            //找到当前的空间
            ImageView dotViewNew = (ImageView) container.getChildAt(currentPage);
            dotViewNew.setBackgroundResource(R.drawable.dot_red_shape);

        }
        //把这个事件消费掉
        return true;
    }
}

Android自定义控件(一)实现Banner,指示点滑动_第2张图片

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#666666"/>
    <size android:width="20dp" android:height="20dp"/>

</shape>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#ff0000"/>
    <size android:width="30dp" android:height="30dp"/>
</shape>
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".MainActivity">

    <!--线性布局 有什么不变:容器-->
    <LinearLayout
        android:id="@+id/ll_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_centerInParent="true"
        >

    </LinearLayout>

</RelativeLayout>

写的思路过程:
Android自定义控件(一)实现Banner,指示点滑动_第3张图片
Android自定义控件(一)实现Banner,指示点滑动_第4张图片
Android自定义控件(一)实现Banner,指示点滑动_第5张图片
Android自定义控件(一)实现Banner,指示点滑动_第6张图片
Android自定义控件(一)实现Banner,指示点滑动_第7张图片
Android自定义控件(一)实现Banner,指示点滑动_第8张图片
Android自定义控件(一)实现Banner,指示点滑动_第9张图片
Android自定义控件(一)实现Banner,指示点滑动_第10张图片

Android自定义控件(一)实现Banner,指示点滑动_第11张图片
Android自定义控件(一)实现Banner,指示点滑动_第12张图片

你可能感兴趣的:(Android)