0

像这里列出的许多其他帖子一样，我与径向渐变作斗争。发布1 , 2 , 3 ...

我想要两件事：

  1. 在具有选择器的按钮周围设置渐变作为背景可绘制以获得光环效果
  2. 调整此渐变半径以获得与屏幕分辨率/尺寸无关的相同感觉。

到目前为止我所做的： 解决方案1

我尝试实施几种解决方案。我在这里展示了我的 2 次最佳尝试。我将带有渐变的可绘制对象设置为按钮周围的封闭布局的背景。这满足了第 1 点）

<FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/custom_background"
        android:gravity="center"
        android:padding="@dimen/padding_extra_large" >

        <Button
            android:id="@+id/snap_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/custom_button" />
</FrameLayout>

这是我的@drawable/custom_background

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item>

    <!-- Circular gradient -->
    <shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle" >
        <gradient
            android:endColor="#ffdbdbdb"
            android:gradientRadius="180"
            android:startColor="#ff000000"
            android:type="radial" 
            android:innerRadiusRatio="2"
            />
    </shape>
</item>

到目前为止我所做的： 解决方案2

效果不错，但android:gradientRadius="180"必须针对每个屏幕进行调整。帖子 1 提供了一些解决方案，我尝试自定义布局和视图，但我遇到了崩溃。某些配置没有失败（背景设置为根布局，但在这种情况下从未调用过 onDraw）。

自定义视图：

public class GradientView extends View {

Paint paint;
RadialGradient gradient;
int maxSize;

public GradientView(Context context) {
    super(context);
    paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    this.setWillNotDraw(false);
    // TODO Auto-generated constructor stub
}

@Override
protected void onDraw(Canvas canvas) {
    Dbg.e("RelativeLayoutSnapBook", " -  onDraw !!!");
    maxSize = Math.max(getHeight(), getWidth());
    RadialGradient gradient = new RadialGradient(
            getWidth()/2,
            getHeight()/2,
            maxSize, 
            new int[] {Color.RED, Color.BLACK},
            new float[] {0, 1}, 
            android.graphics.Shader.TileMode.CLAMP);

    paint.setDither(true);
    paint.setShader(gradient);

    canvas.drawRect(0, 0, getWidth(), getHeight(), paint);
}
}

这个观点在这里：

        <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="@dimen/padding_extra_large" >

        <com.snapcar.rider.widget.GradientView
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <Button
            android:id="@+id/snap_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/snap_button" />
    </FrameLayout>

这些是失败：使用堆栈和实习生堆栈膨胀片段时出错：

10-29 18:55:25.794: E/AndroidRuntime(11828): FATAL EXCEPTION: main
10-29 18:55:25.794: E/AndroidRuntime(11828): android.view.InflateException: Binary XML file line #33: Error inflating class com.xxx.widget.GradientView
10-29 18:55:25.794: E/AndroidRuntime(11828): Caused by: java.lang.ClassNotFoundException: com.xxx.rider.widget.GradientView in loader dalvik.system.PathClassLoader[/system/framework/com.google.android.maps.jar:/data/app/com.snapcar.rider-1.apk]

你能帮我做吗？非常感谢！

编辑：有人？

4

1 回答 1

0

我解决了！太麻烦了：/如果你知道Photoshop，我想你最好还是去吧！

感谢这篇文章给了我前进的道路： multiple-gradrient只使用了第一个代码提取，但如果你到达这篇文章，整篇文章可能会让你感兴趣。

因此，我使用全局布局上的回调完全用代码定义了我的渐变：

    @Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    Log.v(TAG, "- onCreateView Fragment");
    root = inflater.inflate(R.layout.fragment_layout, null);
    root.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            Log.e(TAG, "- On Layout Completed ! ");
            final FrameLayout frame = (FrameLayout) root.findViewById(R.id.frame_layout_gradient);
            ShapeDrawable.ShaderFactory sf = new ShapeDrawable.ShaderFactory() {
                @Override
                public Shader resize(int width, int height) {
                    Log.e(TAG, " - onGlobalLayout : getWidth = "+ frame.getWidth() +" - getHeight = "+ frame.getHeight() );
                    RadialGradient lg = new RadialGradient(frame.getWidth()/2, frame.getHeight()/2, 
                            frame.getWidth()/2, Color.BLACK, Color.parseColor("#FFdbdbdb"),  TileMode.CLAMP);
                    return lg;
                }
            };
            PaintDrawable p = new PaintDrawable();
            p.setShape(new OvalShape());
            p.setShaderFactory(sf);
            frame.setBackgroundDrawable((Drawable)p);
        }
    }
            );

这个技巧 Color.parseColor("#FFdbdbdb")是必要的，因为 RadialGradient 的延迟构造函数无法正确读取对您的引用R.color.the_gray_I_want

在我的例子中，OvalShape 做了一个圆圈，因为我的 frameLayout 是方形的。

使用此解决方案，您可以拥有完全独立于屏幕特性的阴影。

![结果 - 从 SG3 到 HTC 野火不变！1

于 2013-10-31T11:28:23.653 回答