微信小程序单选多选按钮创建

时间：2023-07-01 14:05 阅读数：101 人阅读分类：知识百科

　微信小程序单选多选按钮，微信小程序的单选多选按钮是怎么样的?微信小程序的单选多选按钮是怎么创建的，下面小编精心收集整理了微信小程序单选多选按钮创建，有兴趣的朋友欢迎来阅读。

　　首先，先创建一个安卓项目，名字为"bulb",把两张图片：开灯与关灯状态的图片放入"drawable-"随意一个文件夹下

　　然后在res文件夹下找到layout文件夹，找到activity_main.xml或fragment_main.xml，在里面输入或拖拽按钮

　　xmlns:tools="schemas.android/tools"

　　android:layout_width="match_parent"

　　android:layout_height="match_parent"

　　tools:context=".MainActivity" >

　　android:id="@+id/image"

　　android:layout_width="120dp"

　　android:layout_height="120dp"

　　android:layout_alignParentTop="true"

　　android:layout_centerHorizontal="true"

　　android:src="@drawable/off" />

　　android:id="@+id/radioGroup1"

　　android:layout_width="wrap_content"

　　android:layout_height="wrap_content"

　　android:layout_alignRight="@+id/image"

　　android:layout_below="@+id/image"

　　android:layout_marginRight="35dp"

　　android:layout_marginTop="20dp"

　　android:orientation="horizontal"

　　android:id="@+id/on"

　　android:layout_width="wrap_content"

　　android:layout_height="wrap_content"

　　android:text="开灯" />

　　android:id="@+id/off"

　　android:layout_width="wrap_content"

　　android:layout_height="wrap_content"

　　android:checked="true"

　　android:text="关灯" />

　　android:id="@+id/checkBulb11"

　　android:layout_width="wrap_content"

　　android:layout_height="wrap_content"

　　android:layout_below="@+id/radioGroup1"

　　android:layout_centerHorizontal="true"

　　android:layout_marginTop="34dp"

　　android:text="开灯" />

　　最后在src下的java文件里MainActivity.java

　　package com.example.bulb;

　　import android.app.Activity;

　　import android.os.Bundle;

　　import android.view.Menu;

　　import android.widget.CheckBox;

　　import android.widget.CompoundButton;

　　import android.widget.CompoundButton.OnCheckedChangeListener;

　　import android.widget.ImageView;

　　import android.widget.RadioButton;

　　public class MainActivity extends Activity implements OnCheckedChangeListener{

　　private ImageView image;

　　private RadioButton on,off;

　　private CheckBox checkBulb;

　　@Override

　　protected void onCreate(Bundle savedInstanceState) {

　　super.onCreate(savedInstanceState);

　　setContentView(R.layout.fragment_main);

　　image=(ImageView) this.findViewById(R.id.image);

　　on=(RadioButton) this.findViewById(R.id.on);

　　off=(RadioButton) this.findViewById(R.id.off);

　　checkBulb=(CheckBox) this.findViewById(R.id.checkBulb11);

　　on.setOnCheckedChangeListener(this);

　　checkBulb.setOnCheckedChangeListener(this);

　　}

　　@Override

　　public boolean onCreateOptionsMenu(Menu menu) {

　　// Inflate the menu; this adds items to the action bar if it is present.

　　getMenuInflater().inflate(R.menu.main, menu);

　　return true;

　　}

　　public void setBulbState(boolean state){

　　if(state==true){

　　//改变图片

　　image.setImageResource(R.drawable.on);

　　//改变checkbox文本

　　checkBulb.setText("关灯");

　　}else{

　　//改变图片

　　image.setImageResource(R.drawable.off);

　　//改变checkbox文本

　　checkBulb.setText("开灯");

　　}

　　//改变radiobutton状态

　　on.setChecked(state);

　　off.setChecked(!state);

　　//改变chackbox的状态

　　checkBulb.setChecked(state);

　　}

　　@Override

　　public void onCheckedChanged(CompoundButton arg0, boolean arg1) {

　　setBulbState(arg1);

　　}

　　效果自己检验吧!

　　以上就是微信小程序单选多选按钮创建的全部内容，希望能帮助到大家,更多小程序、微信小程序资讯请关注微小乔网站。