【AndroidStudio开发】（二）加入摇杆控制

系列文章目录

【AndroidStudio开发】（一）：新建页面切换项目

【AndroidStudio开发】（二）：加入摇杆控制

【AndroidStudio开发】（三）：经典蓝牙+BLE蓝牙搜索

【AndroidStudio开发】（四）：蓝牙BLE设备连接

---

前言

第一篇文章讲述了如何用AndroidStudio(以下简称AS)新建一个页面切换的项目，这篇文章则是对第一篇文章的页面进行升级。第一篇文章的页面非常简单明了，就一个按钮，点击跳转，现在需要在这个页面加入其它东西，比如我们在玩游戏时经常用到的摇杆组件，摇杆最常见的用法就是遥控小车了。

一、摇杆组件

这里用到的是github上的一个摇杆组件，感觉挺好用的，就直接引用了，大家可以直接去github上面下载这个库，下面是一张这个库的摇杆界面照片。如果觉得github下载速度慢的话，可以直接去我上传的资源-虚拟摇杆下载。

注意，这是一个横屏的页面，看自己需求，是保留横屏还是改成竖屏。这里直接使用竖屏了。
这个项目是可以直接用AS打开的，在初始页面选择Open 已存在的一个项目。

选中已存在项目文件夹的build.gradle文件。项目就直接打开了，不过涉及到一些资源的加载，打开时间可能需要久一点，才会形成目录结构。

这个只是一个资源库，是没办法直接编译运行的，不过有另外一个demo项目，这个项目是可以直接编译并且在模拟器里面运行。

二、导入摇杆库

1.文件复制

第一步，把库下载完毕后，用AS打开，选中JoystickView文件，可以直接Ctrl+C，然后到其它项目的目录下直接Ctrl+V，就可以把这个文件直接拷贝到其它项目了，AS我最喜欢的就是这一点。直接拷贝到下面这个目录下就行了。

拷贝之后，出现了很多红色的告警，那是因为还缺少对应的资源文件。同样的，采用复制粘贴大法拷贝attrs.xml到values目录下。

2.主函数引入

找到SecondFragment的onCreateView函数。
在onCreateView函数上方增加三个变量

    private TextView mTextViewAngleRight;
    private TextView mTextViewStrengthRight;
    private TextView mTextViewCoordinateRight;

接着修改onCreateView函数

public View onCreateView(
            LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState
    ) {
        // Inflate the layout for this fragment
        View view=inflater.inflate(R.layout.fragment_second, container, false);

        mTextViewAngleRight = view.findViewById(R.id.textView_angle_right);
        mTextViewStrengthRight = view.findViewById(R.id.textView_strength_right);
        mTextViewCoordinateRight = view.findViewById(R.id.textView_coordinate_right);

        final JoystickView joystickRight = (JoystickView) view.findViewById(R.id.joystickView_right);
        joystickRight.setOnMoveListener(new JoystickView.OnMoveListener() {
            @SuppressLint("DefaultLocale")
            @Override
            public void onMove(int angle, int strength) {
                mTextViewAngleRight.setText(angle + "°");
                mTextViewStrengthRight.setText(strength + "%");
                mTextViewCoordinateRight.setText(
                        String.format("x%03d:y%03d",
                                joystickRight.getNormalizedX(),
                                joystickRight.getNormalizedY())
                );
            }
        });
        return view;
    }

复制完毕后，可以看到页面又出现了各种红色的报错提示，现在我们需要一个一个的添加了，没有对应的文件进行拷贝。

3.页面文件修改

找到fragment_second.xml文件。打开之后是这个页面，我习惯通过修改xml文件，所以切换到code页面修改。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".SecondFragment">

    <Button
        android:id="@+id/button_second"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/previous"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent" />

    <TextView
        android:id="@+id/textView_angle_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="0°"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView_strength_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView_angle_right"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="20dp"
        android:text="0%"/>

    <TextView
        android:id="@+id/textView_coordinate_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView_strength_right"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="40dp"
        android:text="x000:y000"/>

    <com.example.myapplication.JoystickView xmlns:custom="http://schemas.android.com/apk/res-auto"
        android:id="@+id/joystickView_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        custom:JV_backgroundColor="#009688"
        custom:JV_borderColor="#00796B"
        custom:JV_borderWidth="8dp"
        custom:JV_buttonColor="#FF6E40" />
</androidx.constraintlayout.widget.ConstraintLayout>

所有文件都调整完毕之后，我们先点击build按钮，之后再去design界面查看。

最后的效果图是下面这样的。

4.效果验证

直接运行模拟器进行验证。

如果是模拟器是黑屏页面，记得点开机按钮。

点击Next，切换到第二个页面，页面显示出摇杆，点击Previous切换回第一个页面。摇杆拖动的时候会在左上角显示出摇杆的位置、偏离中心的强度。

文件比较多，就不放代码了，完整的项目资源链接在这-安卓虚拟摇杆项目。

总结

以上就是在页面添加虚拟摇杆的所有内容了，这个是竖屏的摇杆页面，后续会加入横屏的页面，以及横竖屏如何切换。这个是设计一个遥控小车APP的第二步，增加一个摇杆控制方式，后续会加入按钮控制方式，还有蓝牙连接小车部分。