Как отобразить текущее местоположение автобусов в формате вроде:

Question

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

Это мой вид переработчика

<android.support.v7.widget.RecyclerView
    android:id="@+id/bus_list"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>

Этот метод показывает только доступные автобусы на этом маршруте.

public void getData(View view){

    final String[] buseNumbers = {"10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20"};
    recyclerView = (RecyclerView) view.findViewById(R.id.bus_list);
    recyclerView.setLayoutManager(new LinearLayoutManager(getActivity().getApplicationContext()));

    searchBus.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            // startingloc and destination will be used to find buses
            String startingLoc = startingLocation.getText().toString().trim();
            String destinationLoc = destinationLocation.getText().toString().trim();

            String[] buseNumbers = selectbus(startingLoc, destinationLoc);

            if(TextUtils.isEmpty(startingLoc) || TextUtils.isEmpty(destinationLoc)){
                Toast.makeText(getActivity().getApplicationContext(), "Please enter all fields", Toast.LENGTH_SHORT).show();
                return;
            }
            else if(startingLocation.getText().toString().equals(destinationLocation.getText().toString())){
                Toast.makeText(getContext(), "Stating location and destination can't be same", Toast.LENGTH_SHORT).show();
            }
            else

            // showing all available buses
            recyclerView.setAdapter(new BusAdapter(buseNumbers));

        }
    });

}

Я обрабатываю событие клика следующим образом:

@Override
public void onBindViewHolder(BusviewHolder holder, int position) {
    final String busNumb = data[position];
    holder.busNumber.setText(busNumb);
    holder.parentLayout.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(v.getContext(), busNumb, Toast.LENGTH_SHORT).show();
        }
    });
}

Теперь вместо всплывающего сообщения я хочу новое действие, как показано на изображении выше, где каждая запись показывает области, откуда проходит автобус, с текущим местоположением автобуса. Можете ли вы объяснить мне, какой макет следует использовать и как это сделать.

Answer 1

Вы можете использовать этот тип макета и получить желаемый дизайн

1.Создайте файл "/res/values/attrs.xml" со следующим содержимым:

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

<declare-styleable name="DividerView">
    <attr name="color" format="color" />
    <attr name="dashLength" format="dimension" />
    <attr name="dashGap" format="dimension" />
    <attr name="dashThickness" format="dimension" />
    <attr name="orientation" format="enum">
        <enum name="horizontal" value="0" />
        <enum name="vertical" value="1" />
    </attr>
</declare-styleable>

</resources>

2.Создайте класс DividerView со следующим содержимым:

public class DividerView extends View {
static public int ORIENTATION_HORIZONTAL = 0;
static public int ORIENTATION_VERTICAL = 1;
private Paint mPaint;
private int orientation;

public DividerView(Context context, AttributeSet attrs) {
    super(context, attrs);
    int dashGap, dashLength, dashThickness;
    int color;

    TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.DividerView, 0, 0);

    try {
        dashGap = a.getDimensionPixelSize(R.styleable.DividerView_dashGap, 5);
        dashLength = a.getDimensionPixelSize(R.styleable.DividerView_dashLength, 5);
        dashThickness = a.getDimensionPixelSize(R.styleable.DividerView_dashThickness, 3);
        color = a.getColor(R.styleable.DividerView_color, 0xff000000);
        orientation = a.getInt(R.styleable.DividerView_orientation, ORIENTATION_HORIZONTAL);
    } finally {
        a.recycle();
    }

    mPaint = new Paint();
    mPaint.setAntiAlias(true);
    mPaint.setColor(color);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth(dashThickness);
    mPaint.setPathEffect(new DashPathEffect(new float[] { dashLength, dashGap, }, 0));
}

public DividerView(Context context) {
    this(context, null);
}

@Override
protected void onDraw(Canvas canvas) {
    if (orientation == ORIENTATION_HORIZONTAL) {
        float center = getHeight() * .5f; 
        canvas.drawLine(0, center, getWidth(), center, mPaint);
    } else {
        float center = getWidth() * .5f; 
        canvas.drawLine(center, 0, center, getHeight(), mPaint);
    }
}
}

XML-код, подобный следующему: -

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

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

    <ImageView
        android:id="@+id/iv_tick"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/right" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Hello This Is My Text" />

</LinearLayout>

<com.example.YOURPACKAGENAME.DividerView
    android:layout_width="40dp"
    android:layout_height="150dp"
    android:layerType="software"
    custom:color="#ff0000"
    custom:dashGap="2dp"
    custom:dashLength="6dp"
    custom:dashThickness="2dp"
    custom:orientation="vertical" />

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

    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/right" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Hello This Is My Text" />

</LinearLayout>

<com.example.YOURPACKAGENAME.DividerView
    android:layout_width="40dp"
    android:layout_height="60dp"
    android:layerType="software"
    custom:color="#ff0000"
    custom:dashGap="2dp"
    custom:dashLength="6dp"
    custom:dashThickness="2dp"
    custom:orientation="vertical" />

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

    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/right" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Hello This Is My Text" />

</LinearLayout>

<com.example.YOURPACKAGENAME.DividerView
    android:layout_width="40dp"
    android:layout_height="100dp"
    android:layerType="software"
    custom:color="#ff0000"
    custom:dashGap="2dp"
    custom:dashLength="6dp"
    custom:dashThickness="2dp"
    custom:orientation="vertical" />

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

    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/right" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Hello This Is My Text" />

</LinearLayout>

Снимок экрана

Я надеюсь, что это может помочь вам!

Спасибо.