如何在Android中制作像这样的自定义搜索栏？

Question

如何在图片下方设计自定义seekbar

有人有什么想法请指导我。感谢所有人

Answer 1

我认为This library将为您

-将以下依赖项添加到您的build.gradle文件中。

    implementation'com.kevalpatel2106:ruler-picker:1.1'

-在XML布局内添加RulerValuePicker。

<com.kevalpatel2106.rulerpicker.RulerValuePicker
    android:id="@+id/ruler_picker"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="@android:color/holo_orange_dark"
    app:indicator_color="@android:color/white"
    app:indicator_interval="14dp"
    app:indicator_width="2dp"
    app:max_value="120"
    app:min_value="35"
    app:notch_color="@android:color/white"
    app:ruler_text_size="6sp"/>

-Java：

rulerValuePicker.setValuePickerListener(new RulerValuePickerListener() {
    @Override
    public void onValueChange(final int selectedValue) {
        //Value changed and the user stopped scrolling the ruler.
        //Application can consider this value as final selected value.
    }

    @Override
    public void onIntermediateValueChange(final int selectedValue) {
        //Value changed but the user is still scrolling the ruler.
        //This value is not final value. Application can utilize this value to display the current selected value.
    }
});

-科特林：

rulerValuePicker.setValuePickerListener(object : RulerValuePickerListener {
    override fun onValueChange(value: Int) {
        //Value changed and the user stopped scrolling the ruler.
        //You can consider this value as final selected value.
    }

    override fun onIntermediateValueChange(selectedValue: Int) {
        //Value changed but the user is still scrolling the ruler.
        //This value is not final value. You can utilize this value to display the current selected value.
    }
})

-截图：

Answer 2

build.gradle添加此依赖项

implementation 'com.android.support:recyclerview-v7:27.1.1'

Java类

 recyclerView = findViewById(R.id.recycler_view);


        LinearLayoutManager layoutManager = new LinearLayoutManager(getBaseContext());
        layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
        recyclerView.setLayoutManager(layoutManager);

        seekBarList = new ArrayList();
        for (int i = 0; i < 10; i++) {
            seekBarList.add(i);
        }

        SeekBarAdapter seekBarAdapter = new SeekBarAdapter(MainActivity.this, seekBarList);
        recyclerView.setAdapter(seekBarAdapter);

适配器类

public class SeekBarAdapter extends RecyclerView.Adapter<SeekBarAdapter.MyViewHolder> {

        private Context context;
        private ArrayList<Integer> seekList;

        public SeekBarAdapter(MainActivity mainActivity, ArrayList<Integer> barCodeGetList) {
            this.context = mainActivity;
            this.seekList = barCodeGetList;
        }

        @NonNull
        public SeekBarAdapter.MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {

            View itemView = LayoutInflater.from(parent.getContext())
                    .inflate(R.layout.seekbaritem, parent, false);

            return new SeekBarAdapter.MyViewHolder(itemView);
        }

        @Override
        public void onBindViewHolder(@NonNull SeekBarAdapter.MyViewHolder holder, @SuppressLint("RecyclerView") final int position) {

            if (position > 0) {
                holder.img_value_indicater.setVisibility(View.GONE);
            }

            holder.txt_value.setText(seekList.get(position).toString());


        }

        @Override
        public int getItemCount() {
            return seekList.size();
        }

        class MyViewHolder extends RecyclerView.ViewHolder {
            TextView txt_value;
            View view_value;
            ImageView img_value_indicater;
            LinearLayout lay_seekbar_margin;

            MyViewHolder(View view) {
                super(view);
                txt_value = view.findViewById(R.id.txt_value);
                view_value = view.findViewById(R.id.view_value);
                img_value_indicater = view.findViewById(R.id.img_select_indicater);
                lay_seekbar_margin = view.findViewById(R.id.lay_seekmargin);
            }
        }
    }

适配器布局

<?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="8dp"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/lay_seekmargin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="20dp"
        android:orientation="vertical">

        <View
            android:id="@+id/view_value"
            android:layout_width="1dp"
            android:layout_height="30dp"
            android:layout_gravity="center"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:background="#000000" />

        <TextView
            android:id="@+id/txt_value"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp" />

        <ImageView
            android:id="@+id/img_select_indicater"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_seek_indicator" />

    </LinearLayout>
</LinearLayout>