Android教程1: MapView (Google Map)上的透明面板（直线样式）
在这个教程中，我们将会告诉他家怎样创建一个透明面板。我们将展示怎样在一个Google Map中使用透明面板，你可以使用相同的技巧应用到其他的view中。
从这一点上来说，这就是我们今天将要开发的东西——只在Android MapView的底部显示单一按钮的透明面板。
我们将假设你已经知道Android编程的基本点，只会提到这些“高级的”话题：
1) 创建一个可以画出透明背景和边界的类。2) 在你的样式XML中添加一个custom View class 作为一个声明。
(1)创建一个惯例样式作为一个透明面板
我们需要我们的透明面板hold children，所以我们寻找最自然的Android视图来延伸，选择了Linear Layout，因为我们需要我们的TransparentPanel来水平地排版它的children。我们只要简单地选择延伸任何其他样式类的RelativeLayout。（这段不是很理解，原文如下We wanted our transparent panel to hold children so we looked for the most natural Android view to extend and selected Linear Layout because we wanted our TransparentPanel class to layout its children horizontally. We could just as easily chosen to extend RelativeLayout of any other layout class.）
TransparentPanel 延伸LinearLayout
TransparentPanel的“神奇”之处在于dispathDraw() method。对于你们之中已经创建过自己的惯例View的人来说，你可能想知道为什么我们重新定义dispatchDraw() 而不是onDraw()。由于某些原因LinearLayout并不调用自己本身的onDraw() method…明显是因为它的开发者假定一个LinearLayout 永远不会需要画些什么。但是，我们需要我们的TransparentPanel 来画一个背景。所以我们就重新定义dispatchDraw() 来画背景，然后让super.dispatchDraw(canvas) 渲染所有子组件(child components)。
protected void dispatchDraw(Canvas canvas) {
RectF drawRect = new RectF();drawRect.set(0,0, getMeasuredWidth(), getMeasuredHeight());
canvas.drawRoundRect(drawRect, 5, 5, innerPaint);canvas.drawRoundRect(drawRect, 5, 5, borderPaint);
super.dispatchDraw(canvas);
}
而对于那些刚刚开始画自己的图表的朋友，让我们在此复习一些东西吧。首先，我们使用要画的背景的坐标来填充一个RectF。然后我们做一些调用drawRoundRect()。第一个调用通过innerPaint来画透明的灰色背景，第二个调用通过我们想要画的白色边界。最后我们调用super.dispatchDraw(canvas)渲染我们的子组件(child components)（在此例中是一个按钮）。
灰色背景由alpha (transparency ) == 225渲染。这使得地图可以正正好好透过它来展示。
innerPaint.setARGB(225, 75, 75, 75);
And borderPaint allows us to render a white border with a Stroke of width = 2.
borderPaint = new Paint();
borderPaint.setARGB(255, 255, 255, 255);
borderPaint.setAntiAlias(true);
borderPaint.setStyle(Style.STROKE);
borderPaint.setStrokeWidth(2);
做完了上述步骤之后，确保setAntiAlias(true)，这样，你的图画的边界就能与它的周围环境无缝相连。你也可以把这个选项设为false，看看你的边界是什么样的情况。
(2) 在样式XML中添加惯例TransparentPanel类作为一个声明。
现在我们准备好要把TransparentPanel插入我们的样式XML类，添加一个按钮。参考我们的新类，我们只要提供完整类路径（full classpath）给TransparentPanel，然后提供样式参数给任何LinearLayout。在这个例子中，我们提供填充，这样按钮就不会紧贴着TransparentPanel的边界了。
<com.pocketjourney.view.TransparentPanel
android:id=”@+id/transparent_panel”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:paddingLeft=”5px”
android:paddingTop=”5px”
android:paddingRight=”5px”
android:paddingBottom=”5px”>
<Button android:id=”@+id/button_click_me”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Click Me!”>
</com.pocketjourney.view.TransparentPanel>
从这一点上来说，这就是我们今天将要开发的东西——只在Android MapView的底部显示单一按钮的透明面板。
我们将假设你已经知道Android编程的基本点，只会提到这些“高级的”话题：
1) 创建一个可以画出透明背景和边界的类。2) 在你的样式XML中添加一个custom View class 作为一个声明。
(1)创建一个惯例样式作为一个透明面板
我们需要我们的透明面板hold children，所以我们寻找最自然的Android视图来延伸，选择了Linear Layout，因为我们需要我们的TransparentPanel来水平地排版它的children。我们只要简单地选择延伸任何其他样式类的RelativeLayout。（这段不是很理解，原文如下We wanted our transparent panel to hold children so we looked for the most natural Android view to extend and selected Linear Layout because we wanted our TransparentPanel class to layout its children horizontally. We could just as easily chosen to extend RelativeLayout of any other layout class.）
TransparentPanel 延伸LinearLayout
TransparentPanel的“神奇”之处在于dispathDraw() method。对于你们之中已经创建过自己的惯例View的人来说，你可能想知道为什么我们重新定义dispatchDraw() 而不是onDraw()。由于某些原因LinearLayout并不调用自己本身的onDraw() method…明显是因为它的开发者假定一个LinearLayout 永远不会需要画些什么。但是，我们需要我们的TransparentPanel 来画一个背景。所以我们就重新定义dispatchDraw() 来画背景，然后让super.dispatchDraw(canvas) 渲染所有子组件(child components)。
protected void dispatchDraw(Canvas canvas) {
RectF drawRect = new RectF();drawRect.set(0,0, getMeasuredWidth(), getMeasuredHeight());
canvas.drawRoundRect(drawRect, 5, 5, innerPaint);canvas.drawRoundRect(drawRect, 5, 5, borderPaint);
super.dispatchDraw(canvas);
}
而对于那些刚刚开始画自己的图表的朋友，让我们在此复习一些东西吧。首先，我们使用要画的背景的坐标来填充一个RectF。然后我们做一些调用drawRoundRect()。第一个调用通过innerPaint来画透明的灰色背景，第二个调用通过我们想要画的白色边界。最后我们调用super.dispatchDraw(canvas)渲染我们的子组件(child components)（在此例中是一个按钮）。
灰色背景由alpha (transparency ) == 225渲染。这使得地图可以正正好好透过它来展示。
innerPaint.setARGB(225, 75, 75, 75);
And borderPaint allows us to render a white border with a Stroke of width = 2.
borderPaint = new Paint();
borderPaint.setARGB(255, 255, 255, 255);
borderPaint.setAntiAlias(true);
borderPaint.setStyle(Style.STROKE);
borderPaint.setStrokeWidth(2);
做完了上述步骤之后，确保setAntiAlias(true)，这样，你的图画的边界就能与它的周围环境无缝相连。你也可以把这个选项设为false，看看你的边界是什么样的情况。
(2) 在样式XML中添加惯例TransparentPanel类作为一个声明。
现在我们准备好要把TransparentPanel插入我们的样式XML类，添加一个按钮。参考我们的新类，我们只要提供完整类路径（full classpath）给TransparentPanel，然后提供样式参数给任何LinearLayout。在这个例子中，我们提供填充，这样按钮就不会紧贴着TransparentPanel的边界了。
<com.pocketjourney.view.TransparentPanel
android:id=”@+id/transparent_panel”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:paddingLeft=”5px”
android:paddingTop=”5px”
android:paddingRight=”5px”
android:paddingBottom=”5px”>
<Button android:id=”@+id/button_click_me”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Click Me!”>
</com.pocketjourney.view.TransparentPanel>
ActivityMain类
public class Tutorial1 extends MapActivity {
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.tutorial1);
Button button = (Button) findViewById(R.id.button_click_me);
button.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
Toast.makeText(Tutorial1.this, "Button Clicked",Toast.LENGTH_SHORT).show();
}});
}
/**
* Must let Google know that a route will not be displayed
*/
@Override
protected boolean isRouteDisplayed() {
return false;
}
}
TransparentPanel 类
public class TransparentPanel extends LinearLayout
{
private Paint innerPaint, borderPaint ;
public TransparentPanel(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public TransparentPanel(Context context) {
super(context);
init();
}
private void init() {
innerPaint = new Paint();
innerPaint.setARGB(0,0,0,0); //gray
innerPaint.setAntiAlias(true);
borderPaint = new Paint();
borderPaint.setARGB(0, 0, 0, 0);
borderPaint.setAntiAlias(true);
borderPaint.setStyle(Style.STROKE);
borderPaint.setStrokeWidth(2);
}
public void setInnerPaint(Paint innerPaint) {
this.innerPaint = innerPaint;
}
public void setBorderPaint(Paint borderPaint) {
this.borderPaint = borderPaint;
}
@Override
protected void dispatchDraw(Canvas canvas) {
RectF drawRect = new RectF();
drawRect.set(0,0, getMeasuredWidth(), getMeasuredHeight());
canvas.drawRoundRect(drawRect, 5, 5, innerPaint);
canvas.drawRoundRect(drawRect, 5, 5, borderPaint);
super.dispatchDraw(canvas);
}
}
运行这个程序就会如图所示！