标签: android-chips

我想定制一个Material芯片。

我认为这是如何做到的：

<style name="AppTheme" parent="Theme.MaterialComponents.NoActionBar">

    .... lots more theme stuff here

    <item name="chipStyle">@style/MaterialChips</item>
    <item name="chipGroupStyle">@style/MaterialChips</item>
    <item name="chipStandaloneStyle">@style/MaterialChips</item>
</style>

<style name="MaterialChips" parent="Widget.MaterialComponents.Chip.Choice">
    <item name="chipBackgroundColor">@color/chips</item>
</style>

像这样的标签都不会chipStyle影响芯片。但如果我app:chipBackgroundColor="@color/chips"在 xml 中设置它就可以了。

对于其他事情，比如 say ，它也可以很好地工作<item name="materialAlertDialogTheme">@style/AlertDialogTheme</item>。

材料文档（如果你可以这样称呼它的话）确实没有帮助。

我有以下场景：

芯片定义：

<chip xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:chipIcon="@drawable/ic_baseline_house_24"
    android:text="@string/chips_holder"
    app:closeIconEnabled="true"
    />

包含 TextInputTeditText 的 xml 部分：

...
<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
    android:enabled="true"
    android:hint="Gallery Selections"
    android:layout_weight="1">
    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/fragment_gallery_text_input_edit_text_selections"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clickable="false"
        android:cursorVisible="false"
        android:focusable="false"
        android:focusableInTouchMode="false" />
</com.google.android.material.textfield.TextInputLayout>
...

房间 liveData 结果观察器，提供来自一组变量的数据：

...
liveDataFilterGallery?.observe(
    viewLifecycleOwner
){filterGalleryResult->
    filterGalleryResult?.let { safeFilterGalleryResult->
        safeFilterGalleryResult.apply {
            val prefixes = arrayOf(
                "Site No",
                "Farm No",
                "Site Id",
                "Assignment Id",
                "Category",
                "Time Stamp")
            fragmentGalleryTextInputEditTextSelections.setText(
                (if(siteNo.isNullOrEmpty()) "" else "${prefixes[0]} = '$siteNo';") +
                (if(farmNo.isNullOrEmpty()) "" else "${prefixes[1]} = '$farmNo';") +
                (if(siteId.isNullOrEmpty()) "" else "${prefixes[2]} …

Im trying to add a vertical divider in chipgroup to separate primary chip from other chips. Just like YouTube:

I have attempted to add it through this method. In the Activity:

<HorizontalScrollView
    android:id="@+id/hscroll_categories"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dp"
    android:layout_marginBottom="10dp"
    android:scrollbars="none">
    <com.google.android.material.chip.ChipGroup
        android:id="@+id/chipgroup_categories"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="8dp"
        android:orientation="horizontal"
        app:singleSelection="true"
        app:selectionRequired="true"
        app:singleLine="true" />
</HorizontalScrollView>

item_chip_category.xml:

<com.google.android.material.chip.Chip xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    app:chipStartPadding="18dp"
    app:chipEndPadding="18dp"
    app:chipMinHeight="40dp"
    android:textColor="@color/txt_category_chip_light"
    app:chipBackgroundColor="@color/bg_category_chip_light"
    app:chipStrokeWidth="1dp"
    app:chipStrokeColor="@color/stroke_category_chip_light"
    style="@style/Widget.MaterialComponents.Chip.Choice"
    android:textAppearance="?android:attr/textAppearance" />

vertical_div.xml:

<View xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="1dp"
    android:layout_height="match_parent"
    android:background="#424242"/>

And adding the chips and divider dynamically:

Chip …

我已实施3Chip内的ChipGroup在我的应用成功，但我有麻烦在左边出现使一个图标。

<android.support.design.chip.ChipGroup
    android:id="@+id/chip_group"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="32dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/img_announcement_photo"
    app:singleLine="true"
    app:singleSelection="true">

    <android.support.design.chip.Chip
        android:id="@+id/chip_donate"
        style="@style/ChipStyle"
        android:checked="true"
        app:chipIcon="@drawable/ic_donate_black_24dp" />

    <android.support.design.chip.Chip
        android:id="@+id/chip_sell"
        style="@style/ChipStyle"
        app:chipIcon="@drawable/ic_sell_black_24dp" />

    <android.support.design.chip.Chip
        android:id="@+id/chip_trade"
        style="@style/ChipStyle"
        app:chipIcon="@drawable/ic_trade_black_24dp" />
</android.support.design.chip.ChipGroup>

但它不显示。我也以编程方式尝试过，但没有成功。我还没有使用新的命名空间，而是使用旧的，com.android.support:design:28.0.0-alpha3因为我也在使用 Google 地图，而且androidx.*.

我是在 Android 中使用 Chips 的新手。我想在单击按钮时从 ChipGroup 中获取选定的筹码。Made 以某种方式检查每个 Chip 并将其添加到 Set 中，但希望使其更有效率。不知何故，我自己没有找到我的问题的答案。

当我检查 2 Chips 并取消选中我检查的第一个 Chips 时，也会出现错误。

这是我的代码：

<com.google.android.material.chip.ChipGroup
                android:id="@+id/chipGroup"
                android:layout_width="300dp"
                android:layout_height="wrap_content"

                >

                <com.google.android.material.chip.Chip
                    android:id="@+id/chip1"
                    style="@style/Widget.MaterialComponents.Chip.Filter"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="1"
                    android:backgroundTint="#99FFFFFF"
                    />

                <com.google.android.material.chip.Chip
                    android:id="@+id/chip2"
                    style="@style/Widget.MaterialComponents.Chip.Filter"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="2"
                    android:backgroundTint="#99FFFFFF"/>


                <com.google.android.material.chip.Chip
                    android:id="@+id/chip3"
                    style="@style/Widget.MaterialComponents.Chip.Filter"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="3"
                    android:backgroundTint="#99FFFFFF"/>

                <com.google.android.material.chip.Chip
                    android:id="@+id/chip4"
                    style="@style/Widget.MaterialComponents.Chip.Filter"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="4"
                    android:backgroundTint="#99FFFFFF"/>

                <com.google.android.material.chip.Chip
                    android:id="@+id/chip5"
                    style="@style/Widget.MaterialComponents.Chip.Filter"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="5"
                    android:backgroundTint="#99FFFFFF"/>

            </com.google.android.material.chip.ChipGroup>

Set<Integer> chipIds = new HashSet<>();

int chip1Id= 1;
int chip2Id= 2;
int chip3Id= 3;
int chip4Id= 4;
int chip5Id= …

我使用带有动态芯片的芯片组。我希望芯片根据它们的文字被包裹在宽度上。但即使没有填充，它也需要额外的空间。

下面是我的代码：

xml:

<com.google.android.material.chip.ChipGroup
    android:id="@+id/cg"
    android:layout_width="0dp"
    android:layout_weight="75"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:layout_marginBottom="5dp"
    android:textColor="@android:color/black"
    android:textStyle="bold"
    android:textSize="12sp"
    app:singleSelection="false"
    app:chipSpacingVertical="5dp"
    app:chipSpacingHorizontal="5dp"
    app:singleLine="false"
    app:chipSpacing="2dp">

这是如何动态添加筹码：

for(int i=0;i<cartoonTypes.length;i++){
    chip = new Chip(this);
    chip.setText(cartoonTypes[i].trim());
    chip.setTextColor(Color.WHITE);
    chip.setChipBackgroundColor(getResources().getColorStateList(R.color.colorChip));
    chip.setTextSize(12);
    chip.setGravity(Gravity.CENTER_HORIZONTAL | Gravity.CENTER_VERTICAL);
    chip.setPadding(0,0,0,0);
    cgMovieGenre.addView(chip);
    ChipGroup.LayoutParams layoutParams = (ChipGroup.LayoutParams) chip.getLayoutParams();;
    int dpSize = px2dp(12);;
    layoutParams.height = dpSize;
    layoutParams.width = ChipGroup.LayoutParams.WRAP_CONTENT;
    chip.setLayoutParams(layoutParams);
}

方法 px2dp 这样做：

int px2dp(int px){
    metrics = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(metrics);
    int h = (px * metrics.densityDpi) / DisplayMetrics.DENSITY_DEFAULT;
    return h;
}

我build.gradle有以下依赖项：

implementation fileTree(dir: 'libs', include: …

如何使 a 的ChipGroup行为类似于radioButton在更改背景颜色时一次可以选择一个项目。

我看到了类似这样的链接，但它对我没有帮助，因为我使用 alayoutInflater来显示我的芯片项目。

firebaseFirestore.collection("Categories").addSnapshotListener((queryDocumentSnapshots, e) -> {
            for (DocumentChange doc: queryDocumentSnapshots.getDocumentChanges()){
                if (doc.getType() == DocumentChange.Type.ADDED){
                    Categories categories = doc.getDocument().toObject(Categories.class);
                    post_list.add(categories);
                    Chip chip = (Chip) getLayoutInflater().inflate(R.layout.chip_item_layout, chipGroup, false);
                    chip.setText(categories.getTitle());
                    chipGroup.addView(chip);
                    chipGroup.setOnCheckedChangeListener((chipGroup, id) -> {
                        Chip chip2 = ((Chip) chipGroup.getChildAt(chipGroup.getCheckedChipId()));
                        if (chip2 != null) {
                            for (int i = 0; i < chipGroup.getChildCount(); ++i) {
                                chipGroup.getChildAt(i).setClickable(true);
                                chip2.setChipBackgroundColorResource(R.color.customOrange);
                            }
                            chip2.setClickable(false);
                        }
                    });

                }
            }
        });

我使用android材质Chip视图

它的下部似乎有一个阴影。

我可以使用哪种属性来消除底部阴影的任何机会？

我第一次使用材料芯片。

问题： 我正在使用以下代码动态添加芯片。请检查我写的app:singleSelection="true"对我很重要的内容。即使它一次选择多个芯片。

我想一次只选择一个带有刻度线的芯片。

XML 代码：

<com.google.android.material.chip.ChipGroup
                android:id="@+id/categoryChipsView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:orientation="horizontal"
                app:chipSpacing="10dp"
                app:singleSelection="true"
                app:itemSpacing="15dp"
                app:singleLine="true">
</com.google.android.material.chip.ChipGroup>

Java代码：

private void addChipView(String chipText) {
    View child = getLayoutInflater().inflate(R.layout.row_chip_view, null);
    Chip chip = child.findViewById(R.id.chip);
    chip.setText(chipText);
    chip.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(mContext, ((Chip) v).getText(), Toast.LENGTH_SHORT).show();
        }
    });
    // This is ChipGroup view
    binding.categoryChipsView.addView(child);
}

row_chip_view.xml

<com.google.android.material.chip.Chip xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/chip"
    style="@style/Widget.MaterialComponents.Chip.Filter"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:text="@string/app_name"
    android:textColor="@android:color/white"
    app:checkedIcon="@drawable/ic_check"
    app:chipBackgroundColor="@color/colorAccent"
    app:chipEndPadding="8dp"
    app:chipIconTint="@android:color/white"
    app:chipStartPadding="8dp" …

我正在尝试实现与照片类似的行为。一个可以做同样事情的库也会很有用。我已经尝试过 https://github.com/dokar3/ChipTextField 但遇到了一些问题

java.lang.NoClassDefFoundError: Failed resolution of: Landroidx/compose/ui/platform/LocalSoftwareKeyboardController;