当前位置：文江博客话题详情

如何在小部件右侧创建没有下三角形的Android微调器

发布于 2024-09-30 01:55:01 字数 224 浏览 6 评论 0原文

我有一个屏幕，用户有很多项目需要输入，因此屏幕空间非常宝贵。

我希望屏幕上小部件的外观（在用户按下它之前）与 Spinner 右侧的 EditText 或 Spinner 小部件的左侧部分（没有正常的向下三角形）类似。然后，当用户按下小部件时，他/她将看到正常的微调器选择对话框。

我可以更改一些 Spinner 样式属性来实现此目的吗？

我还没有看到这样的代码。

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

强者自强 2024-10-07 01:55:01

这是一个相当老的问题，但我认为仍然相关，所以这是我的答案：

最简单的方法

lencinhaus 答案是正确的。它有效，但可以通过更简单的方式完成：只需添加另一个背景即可。下面的示例使用标准 Button 背景以获得更均匀的外观：

<Spinner
    android:id="@+id/my_spinner"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:prompt="@string/my_prompt" 
    android:background="@android:drawable/btn_default"
    />

其他答案中使用的样式只不过是将背景应用于小部件。这可以直接在小部件上完成，从而无需创建新的 xml 文件。当然，如果您无论如何都要对微调器应用某种样式，那么这种方法没有任何问题。

为什么？

理解其工作原理的关键在于 9-patch PNG 的描述。右侧和底部的行用于填充，即保留一些空间不被其内容使用。在这种情况下，里面的文字。标准微调器背景使用右侧带有箭头的图像，该箭头位于可用文本区域之外。请参阅下面的图 1 了解说明：

图 1. 原始 Spinner bacground 9-patch PNG http://tinypic。 com/images/404.gif
图 1. 原始 Spinner bacground 9-patch PNG。

仅删除箭头是不够的，因为填充仍保留在那里。您需要使用减少填充的新 9 补丁图像（参见图 2，了解基于图 1 的示例），或者使用没有太多填充的预编译 9 补丁图像之一，例如 的图像EditText (@android:drawable/edit_text) 或 Button (@android:drawable/btn_default< /代码>）。

图 2. 修改后的 Spinner bacground 9-patch PNG，减少了填充。

理解这一点将使您能够为 Spinner 创建自己的背景（并且，事实上，对于任何小部件）。

9-patch 文件的更好解释可以在这里找到

使用 SDK 中的 draw9patch 可执行文件创建文件非常容易 (在此处阅读），但没有什么可以阻止您使用 Photoshop 或 Gimp 相反。请记住，9 片 PNG 只是普通 PNG！唯一需要注意的是确保您仅绘制像素的外部线，并且其余像素完全透明。 靠近边界的抗锯齿可能会产生意想不到的结果。

This is quite an old question, but I think still relevant, so here's my answer:

Simplest Method

lencinhaus answer is correct. It works, but it can be done in an even simpler way: Just add another background to it. The example below uses the standard Button background for a more homogeneous look-and-feel:

<Spinner
    android:id="@+id/my_spinner"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:prompt="@string/my_prompt" 
    android:background="@android:drawable/btn_default"
    />

The syle used in the other answer does not more than applying a background to the widget. That can be done directly to the widget, saving the need for a new xml file. Of course, if you are going to apply a style to the spinner anyways, there's nothing wrong with that approach.

Why?

The key to understand how it works lies in the description of the 9-patch PNGs. The lines at the right and at the bottom are used for padding, i.e., to keep some space from being used by its content. In this case, the text inside. The standard Spinner background uses an image with an arrow at the right that is outside of the usable text area. See figure 1 below for an illustration:

Figure 1. Original Spinner bacground 9-patch PNG http://tinypic.com/images/404.gif
Figure 1. Original Spinner bacground 9-patch PNG.

Just removing the arrow is not enough since the padding remains there. You need to use a new 9-patch image with a decreased padding (see figure 2 for an example based on fig. 1) or use one of the precompiled 9-patch images without so much padding, such as the ones for EditText (@android:drawable/edit_text) or Button (@android:drawable/btn_default).

Figure 2. Modified Spinner bacground 9-patch PNG with reduced padding.

Understanding this will allow you to create your own backgrounds for the Spinner (and, in fact, for any widget).

A better explanation of the 9-patch files can be found here

It's very easy to create the files with the draw9patch executable from the SDK (read about it here), but nothing prevents you to use Photoshop or Gimp instead. Remember, 9-patch PNGs are just plain PNGs! The only caveat is to make sure that you draw only to the outer lines of pixels and that the rest of the pixels are completely transparent. Antialiasing close to the border might yield unexpected results.

回复收藏 0 原文

木格 2024-10-07 01:55:01

您可以做的一件事是从 android 代码库获取 Spinner 的源代码以及相关的布局和资源，并使用它们来创建您自己的自定义小部件（可能您只需要删除箭头从布局并根据您的需要稍微调整代码）。

编辑：
你是对的，按照那篇文章，它实际上非常简单:)你必须做两件事。
首先，在 res/values 下创建一个 styles.xml 文件，打开它并添加以下内容：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style parent="@android:style/Widget.Spinner" name="SpinnerAsEditText">
        <item name="android:background">@android:drawable/edit_text</item>
    </style>
</resources>

接下来，在您的布局中，添加 Spinner，如下所示：

<Spinner style="@style/SpinnerAsEditText" anyOtherAttributeYouNeed="..."></Spinner>

就是这样，现在 Spinner 将看起来像一个普通的 EditText，没有那些无用和烦人的东西向下箭头。

One thing you can do is take Spinner's source code from android code base, together with related layouts and resources, and use them to create your own custom widget (probably you will only need to remove the arrow from the layout and tweak the code a little depending on your needs).

EDIT:
You're right, following that post it was actually really simple :) You have to do two things.
First, create a styles.xml file under res/values, open it and add the following:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style parent="@android:style/Widget.Spinner" name="SpinnerAsEditText">
        <item name="android:background">@android:drawable/edit_text</item>
    </style>
</resources>

Next, in your layout, add the Spinner like this:

<Spinner style="@style/SpinnerAsEditText" anyOtherAttributeYouNeed="..."></Spinner>

That's it, now the spinner will look like a plain EditText, without that unuseful and annoying down arrow.

回复收藏 0 原文

尸血腥色 2024-10-07 01:55:01

我刚刚回答这个问题，因为我的微调器没有显示三角形指示器，现在我明白为什么：我将背景设置为“白色”：

android:background="#FFFFFFFF"

这会删除三角形指示器（Aleadam 所说的微调器背景图像和填充）。

对于我的问题，我通过添加父 LinearLayout 来解决它，只是将背景设置为“白色”。

I just arrived to this question, because my spinner was not showing the triangle indicator, now I understand why: I was setting the background to "white":

android:background="#FFFFFFFF"

This removes the triangle indicator (the spinner background image and padding stated by Aleadam).

For my problem, I solve it adding a parent LinearLayout just to set the background to "white".

回复收藏 0 原文

美人迟暮 2024-10-07 01:55:01

给它一个背景，箭头就会消失。

android:background="@drawable/bg"

Give it a background, the arrow will disappear.

android:background="@drawable/bg"

回复收藏 0 原文

芸娘子的小脾气 2024-10-07 01:55:01

我遇到了同样的问题，并将样式更改为：

style="@style/Widget.AppCompat.Light.DropDownItem.Spinner"

并且它有效。

多么奇怪，它位于 DropDownItem 中。

而具有底部三角形的则称为法线。

干杯!

I was having the same issue and changed the style to:

style="@style/Widget.AppCompat.Light.DropDownItem.Spinner"

and it worked.

How odd, Its located in DropDownItem.

While the one that have the bottom triangle is named the normal.

Cheers!

回复收藏 0 原文

始终不够爱げ你 2024-10-07 01:55:01

关于实际单击微调器时占用空间的相关问题，我偶然发现您可以删除右侧的那些大选择指示器。您会得到一个由行分隔的基本列表，但您可以单击某个项目，它仍然有效。

设置这样的微调器来获取选择指示符：

    Spinner s1 = (Spinner) findViewById(R.id.spinner1);
    ArrayAdapter<CharSequence> adapter1 = ArrayAdapter.createFromResource(
            this, R.array.petals, android.R.layout.simple_spinner_item);
    adapter1.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
    s1.setAdapter(adapter1);

如果没有指示符，则省略 setDropDownViewResource 行。

On related issue of space taken when you actually click on spinner, I found by accident that you can remove those big selection indicators at right. You get a basic list separated by lines but you can click on an item and it still works.

Set up a spinner like this to get the selection indicators:

    Spinner s1 = (Spinner) findViewById(R.id.spinner1);
    ArrayAdapter<CharSequence> adapter1 = ArrayAdapter.createFromResource(
            this, R.array.petals, android.R.layout.simple_spinner_item);
    adapter1.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
    s1.setAdapter(adapter1);

For no indicators just leave out the setDropDownViewResource line.

回复收藏 0 原文

旧故 2024-10-07 01:55:01

你为什么不去和列表进行对话呢？根据您的要求，创建一个 edittext 字段，添加 setOnFocusChangeListener，然后在 onFocusChange() 方法中显示一个包含列表项的对话框。对于带有列表项的对话框

new AlertDialog.Builder(this)
                .setTitle("<Title>")
                .setItems(R.array.<ItemsArrayName>, new DialogInterface.OnClickListener(){
     @Override
public void onClick(DialogInterface dialog, int which) {
// TODO Auto-generated method stub  
}}).show();

why don't you go for a dialog with list. According to your requirement, create an edittext field, add setOnFocusChangeListener and then show a dialog with list items in onFocusChange() method. For dialog with list items

new AlertDialog.Builder(this)
                .setTitle("<Title>")
                .setItems(R.array.<ItemsArrayName>, new DialogInterface.OnClickListener(){
     @Override
public void onClick(DialogInterface dialog, int which) {
// TODO Auto-generated method stub  
}}).show();

回复收藏 0 原文

错々过的事 2024-10-07 01:55:01

没有答案对我有帮助，所以这里有一个非常简单的有效的单行解决方案。

  //some spinner initialisation stuff->
mySpinner.setAdapter(adapter);

  //some spinner initialisation stuff->
mySpinner.getBackground().setColorFilter(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);

我无法确定它是否仅适用于默认的微调器布局，但它与我为其他需求创建的自定义布局配合得很好。

No answer was helpful for me, so here is a really simple one-line solution that worked.

  //some spinner initialisation stuff->
mySpinner.setAdapter(adapter);

  //some spinner initialisation stuff->
mySpinner.getBackground().setColorFilter(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);

I can't tell for sure if it will work with just a default spinner layout, but it worked well with my custom that I created for other needs.

回复收藏 0 原文

~没有更多了~