如何制作带有图像可点击的圆形按钮并导航到另一个屏幕

Question

要求：我想设计一个嵌入图像的圆形按钮，如果我在按钮上单击一次，则图像会变为另一个图像，并且应该导航到另一个屏幕。我怎样才能做到这一点。

这里我可以做圆形按钮，当点击图像时，它会变成另一个图像。但我的问题是：图像显示为方形模式的大小，而不是圆形按钮。它显示在按钮的边界之外。我需要以圆形方式显示图像，它应该在圆形按钮中。我怎样才能做到： 这是我的代码：

MainActivity.java：

      package com.example.circularbutton;

        import android.support.v7.app.ActionBarActivity;
     import android.content.Context;
      import android.content.Intent;
       import android.os.Bundle;
         import android.view.Menu;
           import android.view.MenuItem;
     import android.view.View;
       import android.view.View.OnClickListener;
           import android.widget.Button; 

    public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    CircleImageView b1=(CircleImageView)  findViewById(R.id.btn);//showing issue here
    b1.setImageResource(R.drawable.my);


        final Context context=this;
        b1.setOnClickListener(new OnClickListener() {


            @Override
            public void onClick(View arg0) {

            Intent intent = new Intent(context, Hello.class);
                           startActivity(intent);   
            }
            } );
    }

    }




   my *myborder3.xml* it shapes the button

 <?xml version="1.0" encoding="utf-8"?>

         <shape xmlns:android="http://schemas.android.com/apk/res/android">

  <solid android:color="#FFFFFF"/>    

  <stroke android:width="5dp"
    android:color="#000000"
    />

   <padding android:left="45dp"
     android:top="45dp"
     android:right="45dp"
     android:bottom="45dp"
     /> 

 <corners android:bottomRightRadius="55dip" android:bottomLeftRadius="55dip" 
     android:topLeftRadius="55dip" android:topRightRadius="55dip"/> 

       </shape>




   *my.xml* is:

 <selector xmlns:android="http://schemas.android.com/apk/res/android">

  <item android:state_focused="true" android:drawable="@drawable/mine">
   </item>
     <item android:state_pressed="true"   android:drawable="@drawable/mine1"></item>
 <item android:drawable="@drawable/mine10" ></item>
        </selector>

activiyt_main.xml：

   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.circularbutton.MainActivity" >


   <de.hdodenhof.circleimageview.CircleImageView
  android:id="@+id/btn"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
   android:background="@drawable/myborder3"
       android:text="Test" />

       </RelativeLayout>


  build.gradile:

      buildscript {
    repositories {
    mavenCentral()
    jcenter()
    }
  dependencies {



      compile de.hdodenhof.circleimageview.CircleImageView //added here


   classpath 'de.richsource.gradle.plugins:gwt-gradle-plugin:0.6'
    classpath 'com.android.tools.build:gradle:1.0.0'
  }
   }

       allprojects {
   apply plugin: "eclipse"
   apply plugin: "idea"

   version = '1.0'
    ext {
    appName = 'CircularBUtton'
    gdxVersion = '1.5.3'
    roboVMVersion = '1.0.0-beta-03'
    box2DLightsVersion = '1.3'
    ashleyVersion = '1.3.1'
    aiVersion = '1.4.0'
}

     repositories {
    mavenCentral()
    maven { url "https://oss.sonatype.org/content/repositories/snapshots/" }
    maven { url "https://oss.sonatype.org/content/repositories/releases/" }
  }
  }

  project(":desktop") {
apply plugin: "java"


dependencies {
    compile project(":core")
    compile "com.badlogicgames.gdx:gdx-backend-lwjgl:$gdxVersion"
    compile "com.badlogicgames.gdx:gdx-platform:$gdxVersion:natives-desktop"
    compile "com.badlogicgames.gdx:gdx-box2d-platform:$gdxVersion:natives-desktop"
}
}

    project(":android") {
apply plugin: "android"

configurations { natives }

    dependencies {
    compile project(":core")
    compile "com.badlogicgames.gdx:gdx-backend-android:$gdxVersion"
    natives "com.badlogicgames.gdx:gdx-platform:$gdxVersion:natives-armeabi"
    natives "com.badlogicgames.gdx:gdx-platform:$gdxVersion:natives-armeabi-v7a"
    natives "com.badlogicgames.gdx:gdx-platform:$gdxVersion:natives-x86"
    compile "com.badlogicgames.gdx:gdx-box2d:$gdxVersion"
    natives "com.badlogicgames.gdx:gdx-box2d-   platform:$gdxVersion:natives-armeabi"
    natives "com.badlogicgames.gdx:gdx-box2d-platform:$gdxVersion:natives-armeabi-v7a"
    natives "com.badlogicgames.gdx:gdx-box2d- platform:$gdxVersion:natives-x86"
   }
   }

       project(":html") {
  apply plugin: "gwt"
   apply plugin: "war"


  dependencies {
    compile project(":core")
    compile "com.badlogicgames.gdx:gdx-backend-gwt:$gdxVersion"
    compile "com.badlogicgames.gdx:gdx:$gdxVersion:sources"
    compile "com.badlogicgames.gdx:gdx-backend-gwt:$gdxVersion:sources"
    compile "com.badlogicgames.gdx:gdx-box2d:$gdxVersion:sources"
    compile "com.badlogicgames.gdx:gdx-box2d-gwt:$gdxVersion:sources"
   }
   }

    project(":core") {
      apply plugin: "java"


     dependencies {
    compile "com.badlogicgames.gdx:gdx:$gdxVersion"
    compile "com.badlogicgames.gdx:gdx-box2d:$gdxVersion"
    }
    }

  tasks.eclipse.doLast {
  delete ".project"
    }

我是android开发的初学者。请帮帮我。

更清楚：

按钮和图像应该是圆形的，当用户点击它时，它应该在圆形的相同按钮中显示另一个图像，并且应该导航到另一个屏幕

Answer 1

也许CircleImageView可能就是你想要的。您需要做的就是在build.gradle内的应用程序dependencies文件中包含此行：

compile 'de.hdodenhof:circleimageview:1.2.1'

然后在xml布局中使用de.hdodenhof.circleimageview.CircleImageView而不是普通ImageView。

更新：如果使用Eclipse，您将需要手动导入库。从github克隆项目并导入到您的工作区。

更新2：您将视图夸大为Button，这是错误的。你应该把它投到CircleImageView。

CircleImageView b1=(CircleImageView) findViewById(R.id.btn);

您也可以使用setImageResource代替设置背景，因为它是ImageView。

b1.setImageResource(R.drawable.my);

Answer 2

您可以使用this小部件。

只需使用以下

替换activity_main.xml中的Button视图即可

<at.markushi.ui.CircleButton
    android:layout_width="64dip"
    android:layout_height="64dip"
    android:src="@drawable/ic_action_tick"
    app:cb_color="#99CC00"
    app:cb_pressedRingWidth="8dip" />

Answer 3

如果你在How to make a round button?查看答案，xml应该像

<shape
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle">
    <solid .../>
    <corners .../>
</shape>

（请参阅http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape）solid和corners应该是shape的孩子。

您也可以尝试使用android:shape="oval"

Answer 4

CircleImageView实现了setOnClickListener

示例：

布局：

<de.hdodenhof.circleimageview.CircleImageView
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:id="@+id/btn_interior"
                android:layout_width="96dp"
                android:layout_height="96dp"
                android:src="@drawable/interior"
                app:civ_border_width="2dp"
                app:civ_border_color="#FF4081"/>

爪哇：

CircleImageView b1=(CircleImageView) findViewById(R.id.btn_interior);
    b1.setOnClickListener(new View.OnClickListener(){
    public void onClick(View v) {
    Log.i("Debug", "Click en el boton");
    }
});