Создание кругового вида в андроиде

Ответ 1

Для макета каждого круга я предлагаю этот ответ задать вопрос макет с кнопками в круге, потому что он определяет позиции вашего позиции относительно центр прилагаемого RelativeLayout, независимо от его размера. Затем вы можете наложить два макета кругов таким образом:

<RelativeLayout ...>
    <RelativeLayout // outer circle
        android:layout_alignParentCenter>
        ...
    </RelativeLayout>
    <RelativeLayout // inner circle
        android:layout_alignParentCenter>
        ...
    </RelativeLayout>
</RelativeLayout>

Чтобы поочередно поворачивать каждый из кругов, я предлагаю следующее этот ответ, чтобы задать вопрос ** Повернуть вид иерархии 90 градусов".

Ответ 2

Если вы не ищете анимированный круглый вид, вы можете использовать Абсолютную компоновку и поместить их в код с помощью алгоритма, чтобы проверить, падают ли различные (x, y) позиции по окружности круга.

Предполагая, что круговой вид с центром в (x,y) и радиусе r должен иметь элементы n, тогда координаты будут:

(x + r, y) // for the first element
....
(x + (r * (FloatMath.cos((p-1) * 2 * Math.PI / n))), y - (r * (FloatMath.sin((p-1) * 2 * Math.PI / n)))) // for the 'p'th element

Ответ 3

Я немного опоздал, чтобы ответить на этот вопрос, но для тех, кто все еще сталкивается с этой проблемой. Пожалуйста, взгляните на эту библиотеку:

https://github.com/sababado/CircularView

Edit:

Быстрая настройка

Добавление представления в макет

<com.sababado.circularview.CircularView
android:id="@+id/circular_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:centerBackgroundColor="#33b5e5"
app:centerDrawable="@drawable/center_bg"/> Using the custom attributes requires the following in the layout file. Example

xmlns: app = "http://schemas.android.com/apk/res-auto" Добавление маркеров

Маркер - это объект, который визуально "плавает" вокруг представления. каждый маркер может представлять данные или может просто быть визуальным эффектом. Маркеры должны быть настроены через CircularViewAdapter.

public class MySimpleCircularViewAdapter extends
SimpleCircularViewAdapter {
@Override
public int getCount() {
    // This count will tell the circular view how many markers to use.
    return 20;
}

@Override
public void setupMarker(final int position, final Marker marker) {
    // Setup and customize markers here. This is called every time a marker is to be displayed.
    // 0 >= position > getCount()
    // The marker is intended to be reused. It will never be null.
    marker.setSrc(R.drawable.ic_launcher);
    marker.setFitToCircle(true);
    marker.setRadius(10 + 2 * position);
} } 

Как только реализация CircularViewAdapter будет готова, ее можно установить на объект CircularView.

mAdapter = new MySimpleCircularViewAdapter(); circularView =
(CircularView) findViewById(R.id.circular_view);
circularView.setAdapter(mAdapter); Receiving click listeners

События Click могут быть получены из CircularView.

Чтобы получать события кликов, установите CircularView.OnClickListener в      circularView.setOnCircularViewObjectClickListener(л). Например:

circularView.setOnCircularViewObjectClickListener(new
CircularView.OnClickListener() {
 public void onClick(final CircularView view) {
    Toast.makeText(MainActivity.this, "Clicked center", Toast.LENGTH_SHORT).show();
}

public void onMarkerClick(CircularView view, Marker marker, int position) {
    Toast.makeText(MainActivity.this, "Clicked " + marker.getId(), Toast.LENGTH_SHORT).show();
} }); Animation

В библиотеке есть несколько простых анимаций, встроенных в момент.

Анимация выделенной степени

CircularView имеет animateHighlightedDegree (начало, конец, продолжительность). Метод принимает начальное и конечное положение в градусах, а длинное значение на время анимации. Выделенная степень относится к степень которого "подсвечена" или "сфокусирована". Когда степень сосредоточена он может автоматически запускать вторичную анимацию для маркера.

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

circularView.setOnHighlightAnimationEndListener(new
CircularView.OnHighlightAnimationEndListener() {
@Override
public void onHighlightAnimationEnd(CircularView view, Marker marker, int position) {
    Toast.makeText(MainActivity.this, "Spin ends on " + marker.getId(), Toast.LENGTH_SHORT).show();
} }); Marker Animation Options

Маркеры имеют простую анимацию, связанную с ними; вверх и вниз. Это может повторяться, или это может произойти один раз. CircularView может запускать анимация отскока, когда animateHighlightedDegree (начало, конец, продолжительность) называется. Анимацию отскока можно отключить, вызвав тот же метод с дополнительным флагом. Например:

animateHighlightedDegree (начало, конец, продолжительность, shouldAnimateMarkers) Кроме того, есть контроль над тем, должен ли маркер отскакивать, пока он подсвечивается, и когда выделенное значение степени является постоянным (aka не анимация).

//Разрешить маркеры постоянно анимироваться самостоятельно, когда подсветка анимации не работает.     circularView.setAnimateMarkerOnStillHighlight(истина);//Объединим выше строки со следующим, чтобы маркер в этом положении оживить в начале.     circularView.setHighlightedDegree(circularView.BOTTOM); Последний строка необходима, если анимация отскока также должна выполняться первоначально. Выделенная степень установлена ​​на CircularView.HIGHLIGHT_NONE по умолчанию.

Proguard

Если вы используете proguard, добавьте следующее к вашей proguard script, чтобы сделать уверенные анимации

# keep setters in Views so that animations can still work.
# see http://proguard.sourceforge.net/manual/examples.html#beans
-keepclassmembers public class * extends android.view.View {    void set*(***);    *** get*(); }
# keep setters in CircularViewObjects so that animations can still work.
-keepclassmembers public class * extends com.sababado.circularview.CircularViewObject {    void set*(***);   
*** get*(); } Developer Hints

Каждое свойство, которое можно настроить в CircularViewObject, также может настраиваться на объект Marker. Объект Marker распространяется от CircularViewObject. Первый используется как меньший объект, который плавает вокруг объекта центра. Объектом центра является объект CircularViewObject. По умолчанию маркеры рисуются в том порядке, в котором они созданы; если маркеры перекрываются, то первый маркер будет частично покрытый следующим маркером. Можно установить параметр для рисования выделенный маркер поверх маркеров рядом с ним с circularView.setDrawHighlightedMarkerOnTop(истинно);. Флаг false по умолчанию. Любой объект CircularViewObject может быть скрыт и показан независимо от других объектов, используя setVisibility (int) В макете редактор использует атрибут editMode_markerCount и editMode_markerRadius, чтобы увидеть размер и расположение маркеров. Не при поставке радиуса будет отображаться радиус по умолчанию. Он делает именно то, что задается в вопросе.

Надеюсь, это поможет.

Ответ 4

Вероятно, вам захочется создать свой собственный макет CircularLayout для обработки позиционирования элементов. Посмотрите http://developer.android.com/guide/topics/ui/custom-components.html, особенно раздел "Составные элементы управления".

Лично я бы предпочел написать один макет, который обрабатывает как внутренний, так и внешний круг, а не возиться с попыткой написать макет, который будет правильно обрабатывать вложенность другого пользовательского макета. Описанное вами дело не слишком сложно для этого.

Ответ 5

Используйте следующий XML-код для упорядочивания кнопок в круговом порядке:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
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=".RoundBtn" >

<Button
    android:id="@+id/button1"
    android:layout_width="45dp"
    android:layout_height="45dp"
    android:layout_marginLeft="222.08203dp"
    android:layout_marginTop="270.53426dp"

    android:text="1" />

<Button
    android:id="@+id/button2"
    android:layout_width="45dp"
    android:layout_height="45dp"
    android:layout_marginLeft="162.08203dp"
    android:layout_marginTop="314.12678dp"

    android:text="2" />
<Button
    android:id="@+id/button3"
    android:layout_width="45dp"
    android:layout_height="45dp"
    android:layout_marginLeft="87.917960dp"
    android:layout_marginTop="314.12678dp"

    android:text="3" />
<Button
    android:id="@+id/button4"
    android:layout_width="45dp"
    android:layout_height="45dp"
    android:layout_marginLeft="27.917960dp"
    android:layout_marginTop="270.53423dp"

    android:text="4" />


<Button
    android:id="@+id/button5"
    android:layout_width="45dp"
    android:layout_height="45dp"
    android:layout_marginLeft="5.0dp"
    android:layout_marginTop="200.00000dp"

    android:text="5" />
<Button
    android:id="@+id/button6"
    android:layout_width="45dp"
    android:layout_height="45dp"
    android:layout_marginLeft="27.917960dp"
    android:layout_marginTop="129.46576dp"

    android:text="6" />
<Button
    android:id="@+id/button7"
    android:layout_width="45dp"
    android:layout_height="45dp"
    android:layout_marginLeft="87.917960dp"
    android:layout_marginTop="85.873218dp"

    android:text="7" />

<Button
    android:id="@+id/button8"
    android:layout_width="45dp"
    android:layout_height="45dp"
    android:layout_marginLeft="162.08203dp"
    android:layout_marginTop="85.873218dp"

    android:text="8" />
<Button
    android:id="@+id/button9"
    android:layout_width="45dp"
    android:layout_height="45dp"
    android:layout_marginLeft="222.08203dp"
    android:layout_marginTop="129.46576dp"

    android:text="9" />
<Button
    android:id="@+id/button10"
    android:layout_width="45dp"
    android:layout_height="45dp"
    android:layout_marginLeft="245.0dp"
    android:layout_marginTop="199.99999dp"

    android:text="0" />


</RelativeLayout>