2015-12-29 4 views
2

Я хотел бы создать группу переключателей, чтобы выбрать цвет. Что-то вроде этого:Цветной селектор Android с переключателями

enter image description here

Как я могу добиться чего-то вроде этого? Я не нашел свойства цвета на оригинальном RadioButton. Нужно ли создавать пользовательский элемент управления? Если да, может кто-то просто намекнуть мне на основные шаги, чтобы я мог попробовать какие-то новые исследования? Я очень новичок в Android и стараюсь учиться ...

+1

создать 'пользовательские радио button' или использовать' imageView' или 'imageButton' или' 'button' с drawable'. – Tauqir

ответ

5

Вы можете попробовать пользовательские переключатели или просто использовать или раздувать представления, чтобы добиться такого выбора цвета.

с помощью xml: вам нужно будет создать два ресурса с возможностью рисования в выпадающей папке. Во-первых, как это идет,

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

<solid android:color="#e91e63" /> 
<size 
    android:width="48dp" 
    android:height="48dp" /> 

Это применимо, если вы не получили щелчок на представлении (интерактивными). Второй файл применяется, когда мы обнаруживаем клик.

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

<solid android:color="#e91e63" /> 
<size 
    android:width="53dp" 
    android:height="53dp" /> 
<stroke 
    android:width="5dp" 
    android:color="#d2d1d2" /> 

Теперь в деятельности нужно установить фон рисуем на представление (будь то изображение кнопки или ImageView). Это идет как это (просто пример):

public class MainActivity extends AppCompatActivity { 
private ImageButton img; 
private boolean isSelected = false; 

@Override 
protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 

    img = (ImageButton) findViewById(R.id.img); 
    img.setClickable(true); 
    img.setBackground(getDrawable(R.drawable.unselected_circle)); 
    img.setOnClickListener(new View.OnClickListener() { 
     @Override 
     public void onClick(View v) { 
      img.startAnimation(AnimationUtils.loadAnimation(getBaseContext(), android.R.anim.fade_in)); 
      if (isSelected) { 
       isSelected = false; 
       img.setBackground(getDrawable(R.drawable.unselected_circle)); 
      } else { 
       isSelected = true; 
       img.setBackground(getDrawable(R.drawable.selected_circle)); 
      } 
     } 
    }); 
} 

}

и расположение activity_main выглядит примерно так:

<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:id="@+id/viewGroup" 
tools:context="com.android.empty.MainActivity"> 

<ImageButton 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:padding="10dp" 
    android:layout_margin="20dp" 
    android:clickable="true" 
    android:id="@+id/img"/> 

Однако с помощью этого метода один закончится чтобы создать несколько ярлыков для разных цветов. Чтобы избежать этого, мы можем создать вводимого коэффициента программно, писать код один раз и используя то же самое для различных цветов, используя SetColor (интермедиат цвет) Метод:

public class MainActivity extends AppCompatActivity { 
private ImageButton img; 
private boolean isSelected = false; 

@Override 
protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 

    final GradientDrawable unselected = new GradientDrawable(); 
    unselected.setShape(GradientDrawable.OVAL); 
    unselected.setColor(Color.parseColor("#e91e63")); 
    unselected.setSize(144, 144); 

    final GradientDrawable selected = new GradientDrawable(); 
    selected.setShape(GradientDrawable.OVAL); 
    selected.setColor(Color.parseColor("#E91E63")); 
    selected.setSize(159, 159); 
    selected.setStroke(15, Color.parseColor("#D2D1D2")); 

    img = (ImageButton) findViewById(R.id.img); 
    img.setBackground(unselected); 
    img.setOnClickListener(new View.OnClickListener() { 
     @Override 
     public void onClick(View v) { 
      img.startAnimation(AnimationUtils.loadAnimation(getBaseContext(), android.R.anim.fade_in)); 
      if (isSelected) { 
       isSelected = false; 
       img.setBackground(unselected); 
      } else { 
       isSelected = true; 
       img.setBackground(selected); 
      } 
     } 
    }); 
} 

}

The result looks something like this

Примечание: Это пример говорит только о способе достижения одного селектора, подобного тому, который указан в вопросе. Чтобы создать несколько селекторов, нужно раздуть представление (кнопка изображения) с помощью класса LayoutInflater.

+1

Большое вам спасибо за такой подробный ответ. Мне понадобилось довольно много времени, чтобы собрать так много концепций вместе ... Я многому научился. – RBasniak

1

я застрял в одной и той же проблеме, чтобы использовать радио-кнопки, а затем я попробовал свою собственную руку и создал [CustomRadioShapes]1 Lib.

Простая реализация. реализация:

  1. Скачать релиз AAR файл из CustomRadioAndShapes/папки библиотеки
  2. В вашем Android Студия File-> New -> Новый модуль -> Импорт .aar или .jar
  3. Выбор файла AAR и подпроекта Назовите его как CustomRadioAndShapes. Готово.

enter image description here

enter image description here

Смежные вопросы