Выровняйте 2 текста, 1 нормально, 1 напротив

Я делаю с кнопкой, где всего 4 текста и я хочу выровнять первые 2. Один по самой левой стороне нижнего текста, а другой и по правой стороне нижнего текста.

Итак, из этого:

До

setText(item.title + " " + item.roomId + "\n" + item.teacher + " " + item.classes);

К этому:

После (это то, что я хочу)

setText(declare here a spannable);

Я думаю, что мне следует работать с Spannable, я пробовал кое-что с Alignment.ALIGN_NORMAL и Alignment.ALIGN_OPPOSITE, но я думаю, что сначала следует рассчитать длину нижнего текста, а затем выполнить выравнивание. (Я нашел хороший пример здесь, но это не работаю на моей установке).

Я надеюсь, что кто-то может указать мне хорошее направление.

Изменить:

Причина, по которой я не могу (я думаю) использовать RelativeLayout или LinearLayout, заключается в том, что я расширяю кнопку в другом классе (ScheduleItemView.java):

/**
 * Custom view that represents a {@link ScheduleItem} instance, including its
 * title and time span that it occupies. Usually organized automatically by
 * {@link ScheduleItemsLayout} to match up against a {@link TimeRulerView}
 * instance.
 */
public class ScheduleItemView extends Button {

    private ScheduleItem mItem;

    public ScheduleItemView(Context context, ScheduleItem item) {
        super(context);

        mItem = item;

        setSingleLine(false);
        setText(item.title + " " + item.roomId + "\n" + item.teacher + " "
                + item.classes);

        // TODO: turn into color state list with layers?
        int textColor = Color.WHITE;
        int accentColor = item.accentColor;

        LayerDrawable buttonDrawable = (LayerDrawable) context.getResources()
                .getDrawable(R.drawable.btn_block);
        buttonDrawable.getDrawable(0).setColorFilter(accentColor,
                PorterDuff.Mode.SRC_ATOP);
        buttonDrawable.getDrawable(1).setAlpha(item.containsStarred ? 255 : 0);

        setTextColor(textColor);
        setTextSize(TypedValue.COMPLEX_UNIT_PX, getResources()
                .getDimensionPixelSize(R.dimen.text_size_small));

        setGravity(Gravity.CENTER | Gravity.BOTTOM);

        setBackgroundDrawable(buttonDrawable);
    }

    public ScheduleItem getScheduleItem() {
        return mItem;
    }

    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        measure(MeasureSpec.makeMeasureSpec(getMeasuredWidth(),
                MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec(
                getMeasuredHeight(), MeasureSpec.EXACTLY));
        // layout(getLeft(), getTop(), getRight(), getBottom());
        setGravity(Gravity.CENTER);

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(getRight() - getLeft(), getBottom() - getTop());
    }
}

Я пытался сделать это в protected void onLayout (ScheduleItemsLayout.java):

child.setLayoutParams(new LayoutParams(
        LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));

Но это не работает. Я не уверен, стоит ли мне использовать new RelativeLayout(this).

В этом случае лучше использовать Spannable?

Исходный код проекта можно загрузить здесь (который можно импортировать в Eclipse)


person user2784435    schedule 25.11.2013    source источник
comment
вместо этого используйте относительный макет и берите отдельные текстовые представления и выполняйте необходимое размещение   -  person Suhail Mehta    schedule 25.11.2013
comment
@SuhailMehta Извините, я пробовал относительный макет, но не могу его использовать, потому что я расширяю Button в другом классе. В этом классе я пытался установитьContentView, но затем он говорит, что он не определен. Я думаю, что работа со Spannable — единственное решение.   -  person user2784435    schedule 25.11.2013


Ответы (3)


Что ж, если вы не можете перейти от Button к ViewGroup, вот что вы можете сделать в своем расширенном классе Button:

Удалять:

setText(item.title + " " + item.roomId + "\n" + item.teacher + " "
            + item.classes);

Добавьте в конструктор ScheduleItemView's следующее:

float[] fl1 = new float[item.title.length()];
getPaint().getTextWidths(item.title, fl1);

float[] fl2 = new float[item.roomId.length()];
getPaint().getTextWidths(item.roomId, fl2);

float[] fl3 = new float[item.teacher.length() + item.classes.length() + 1];
getPaint().getTextWidths(item.teacher + " " + item.classes, fl3);

float differenceInWidth = sumUpTheArray(fl3) 
                          - sumUpTheArray(fl1) 
                          - sumUpTheArray(fl2);

float fSpaceArray[] = new float[1];

getPaint().getTextWidths(" ", fSpaceArray);

int numOfSpaces = (int) (differenceInWidth / fSpaceArray[0]);

char[] spaceCharArr = new char[numOfSpaces];

Arrays.fill(spaceCharArr, ' ');

setText(item.title + String.valueOf(spaceCharArr) + item.roomId + "\n" 
                            + item.teacher + " " + item.classes);

Добавьте этот вспомогательный метод, который суммирует массив float:

public float sumUpTheArray(float[] arr) {
    float sum = 0f;

    for (int i = 0; i < arr.length; i++) {
        sum += arr[i];
    }

    return sum;
}

Не знаю, почему вы переопределяете методы onDraw(Canvas) и onMeasure(int, int).

Излишне говорить, что это один запутанный фрагмент кода. Что происходит, так это то, что мы измеряем, сколько места мы должны поместить между title и roomId, чтобы получить желаемое выравнивание. Код прямолинейный (хотя и вызывающий раздражение), поэтому никаких комментариев не было.

С другой стороны, вы можете расширить RelativeLayout:

public class ScheduleItemAlternateView extends RelativeLayout {

    private ScheduleItem mItem;  

    public ScheduleItemAlternateView(Context context, ScheduleItem item) {
        super(context);

        mItem = item;

        int textColor = Color.WHITE;
        int accentColor = item.accentColor;

        LayerDrawable buttonDrawable = (LayerDrawable) context.getResources()
            .getDrawable(R.drawable.btn_block);
        buttonDrawable.getDrawable(0).setColorFilter(accentColor,
            PorterDuff.Mode.SRC_ATOP);
        buttonDrawable.getDrawable(1).setAlpha(item.containsStarred ? 255 : 0);

        // Three TextViews to hold the `title`, `roomId`
        // and `teacher&room` independently
        TextView tvTitle = new TextView(context);
        TextView tvRoomId = new TextView(context);
        TextView tvTeacherAndClasses = new TextView(context);

        // Example ids
        tvTitle.setId(100);
        tvRoomId.setId(101);
        tvTeacherAndClasses.setId(102);

        tvTitle.setTextSize(TypedValue.COMPLEX_UNIT_PX, getResources()
            .getDimensionPixelSize(R.dimen.text_size_small));
        tvRoomId.setTextSize(TypedValue.COMPLEX_UNIT_PX, getResources()
            .getDimensionPixelSize(R.dimen.text_size_small));
        tvTeacherAndClasses.setTextSize(TypedValue.COMPLEX_UNIT_PX, getResources()
            .getDimensionPixelSize(R.dimen.text_size_small));

        tvTitle.setPadding(30, 20, 30, 0);
        tvRoomId.setPadding(30, 20, 30, 0);
        tvTeacherAndClasses.setPadding(30, 5, 30, 20);

        tvTitle.setTextColor(textColor);
        tvRoomId.setTextColor(textColor);
        tvTeacherAndClasses.setTextColor(textColor);

        // Set text
        tvTitle.setText(item.title);        
        tvRoomId.setText(item.roomId);      
        tvTeacherAndClasses.setText(item.teacher + " " + item.classes);

        // LayoutParms
        RelativeLayout.LayoutParams paramsTitle = 
                                 new RelativeLayout.LayoutParams(
                                     RelativeLayout.LayoutParams.WRAP_CONTENT,
                                     RelativeLayout.LayoutParams.WRAP_CONTENT);

        paramsTitle.addRule(RelativeLayout.ALIGN_LEFT, 
                                                  tvTeacherAndClasses.getId());

        RelativeLayout.LayoutParams paramsRoomId = 
                                 new RelativeLayout.LayoutParams(
                                     RelativeLayout.LayoutParams.WRAP_CONTENT,
                                     RelativeLayout.LayoutParams.WRAP_CONTENT);

        paramsRoomId.addRule(RelativeLayout.ALIGN_RIGHT, 
                                                  tvTeacherAndClasses.getId());

        RelativeLayout.LayoutParams paramsTeacherAndClasses = 
                                 new RelativeLayout.LayoutParams(
                                     RelativeLayout.LayoutParams.WRAP_CONTENT,
                                     RelativeLayout.LayoutParams.WRAP_CONTENT);

        paramsTeacherAndClasses.addRule(RelativeLayout.CENTER_HORIZONTAL);
        paramsTeacherAndClasses.addRule(RelativeLayout.BELOW, tvTitle.getId());

        // Add Views to this RelativeLayout
        addView(tvTitle, paramsTitle);
        addView(tvRoomId, paramsRoomId);
        addView(tvTeacherAndClasses, paramsTeacherAndClasses);

        // Set the background as LayerDrawable
        setBackgroundDrawable(buttonDrawable);          
    }
}

Здесь мы создаем три TextView и устанавливаем их LayoutParams для правильного выравнивания.

Вывод одинаков для обоих, хотя я бы рекомендовал второй подход:

введите здесь описание изображения

person Vikram    schedule 07.12.2013
comment
Я пробовал ваш второй код, но отображается только LayerDrawable, текст не отображается. Я использую тот же источник, что и devoxx. Мой ScheduleItemView.java можно найти здесь. Представление добавляется в ScheduleItemsLayout.java с addView(scheduleItemView, 1); (возможно, это неправильно). Как добавляется ваш вид? Я уже пытался установить гравитацию и отключить отступы, но это не работает. (item.title, item.roomId и т. д. не равны нулю). - person user2784435; 07.12.2013
comment
@ user2784435 Давайте поговорим: здесь. - person Vikram; 07.12.2013
comment
Проблема до сих пор не устранена, но мне удалось воспроизвести проблему. Я очистил весь свой код и сохранил только важные части. Исходный код проекта можно загрузить здесь (который можно импортировать в Eclipse). - person user2784435; 28.01.2014
comment
@user2784435 user2784435 Очень жаль, что отвечаю так поздно. Сначала это был сезон отпусков, а теперь я занята школой. Я попробовал ссылку в вашем комментарии - похоже, она уже мертва. Не могли бы вы снова загрузить проект? Я посмотрю на это, как только смогу. - person Vikram; 01.02.2014
comment
Я перезалил проект здесь. Я надеюсь, что вы можете помочь мне с этим! :) - person user2784435; 01.02.2014
comment
@user2784435 Пожалуйста, взгляните на ScheduleItemView.java и sch_item.xml. Скопируйте код из первой ссылки в ScheduleItemView вашего проекта. Добавьте sch_item.xml в папку res/layout. Откройте ScheduleItemsLayout из своего проекта и измените его onMeasure(int, int) на ссылку. Посмотрите, даст ли это желаемый результат. - person Vikram; 03.02.2014
comment
Вааа спасибо! Я приму ваш ответ. Только 2 вещи, когда текст tvTeacherAndClasses длиннее, чем LayerDrawable, он не будет помещать текст в new line. Посмотрите это (так я хочу, или даже лучше (показать только первый класс)). И когда tvTitle и tvRoomId длиннее, чем tvTeacherAndClasses, это также не сработает. Проект можно скачать здесь. Может быть, лучше использовать TableLayout? - person user2784435; 03.02.2014
comment
@ user2784435 Спасибо, что приняли ответ. 2 проблемы, которые вы упомянули, должны быть управляемыми. Я посмотрю на них, как только смогу. Проблема в том, что в этом семестре у меня очень мало времени. Продвинутый курс по структуре данных меня убивает. Я вернусь к вам через день или два. - person Vikram; 03.02.2014
comment
Не торопись. Тем временем я попробовал кое-что с TableLayout, но я думаю, что это не замена RelativeLayout. - person user2784435; 09.02.2014
comment
Также пробовал что-то с AutoResizeTextView, и это тоже не работает. Я надеюсь, что вы поможете мне с этим (спешить некуда). - person user2784435; 02.05.2014

Один из самых простых способов добиться такого поведения, который я нашел, — это воспользоваться преимуществами свойство android layout_weight следующим образом:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="30dp"
    android:background="@color/Orange"
    android:orientation="vertical"
    android:padding="20dp" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/top_left_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="SCHK" />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" >
        </LinearLayout>

        <TextView
            android:id="@+id/top_right_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="G102" />
    </LinearLayout>

    <TextView
        android:id="@+id/bottom_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="VIM M4O3WI, M404WI, M402SJ" />

</LinearLayout>

Таким образом, LinearLayout с весом 1 займет место, необходимое для правильного разделения двух строк в верхней строке по желанию.

Также почему вы «расширяете Button в другом классе»? Если вы делаете это исключительно для того, чтобы получить закругленный угол/оранжевый фон, который отображается в вашем вопросе, вы можете получить тот же эффект, установив фон линейного макета верхнего уровня на стиль кнопки.

person Cumulo Nimbus    schedule 26.11.2013
comment
Смотрите мою правку. Закругленный угол/оранжевый фон устанавливается через LayerDrawable. Не могли бы вы объяснить, как реализовать ваш LinearLayout в моем коде? - person user2784435; 28.11.2013

Используйте 3 TextView внутри RelativeLayout.

для title

    android:id="@+id/title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_centerVertical="true"

для roomId

    android:id="@+id/roomId"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"

для teacher

    android:id="@+id/teacher"
    android:layout_below="@+id/title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
person VenomVendor    schedule 25.11.2013
comment
Мне жаль, что я не могу использовать RelativeLayout, потому что я расширяю Button в другом классе (setContentView или inflating макет не работает в этом классе). Я думаю, что работа с Spannable — единственное решение. - person user2784435; 26.11.2013