如何以类似以下格式显示公共汽车的当前位置:

时间:2019-03-29 13:25:59

标签: android android-recyclerview

我正在尝试制作公交车追踪android应用程序。什么布局以及如何以列表格式显示公共汽车的当前位置,其中每个元素都是公共汽车站。

enter image description here

这是我的回收站视图

<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();
        }
    });
}

现在,我想要一个新的活动,而不是举杯消息,如上面的图片所示,其中每个条目都显示了公共汽车经过的区域以及公共汽车的实时位置。您能否向我解释应该使用哪种布局以及如何执行此操作。

1 个答案:

答案 0 :(得分:0)

您可以使用这种类型的布局并实现所需的设计

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>

屏幕截图

Screen Shot

希望能对您有所帮助!

谢谢。