Wie erstelle ich eine Tabelle als View mit Zellen-Rändern?

  • Antworten:3
  • Bentwortet
Philip M.
  • Forum-Beiträge: 90

13.01.2012, 11:58:16 via Website

Hat einer von euch vielleicht einer eine Idee wie man sowas bewerkstelligen könnte?
Ich habe bisher leider keine Möglichkeit gefunden welche zu meinem Nutzen dienen könnte.
Damit Ihr euch das ein bisschen besser vorstellen könnt hab ich mal einen Entwurf erstellt.
Die schwarzen Linien sollen hierbei die Ränder(Border) darstellen welche auch in der App gezeichnet werden sollen.



Ich hoffe Ihr habt da eine Idee oder schon mal mit ähnlichen probleme zu tun gehabt und eine Lösung dafür entwickelt. :-)
Vielen Dank für eure Hilfe.

Antworten
Florian B.
  • Forum-Beiträge: 284

13.01.2012, 12:43:35 via Website

Um eine Tabelle mit Rändern erstellen zu können, gibt es leider keinen direkten Weg. Du hast aber zwei andere Möglichkeiten, die beide leider nicht optimal sind, aber zum Ziel führen sollten.

1. Du gibst der View in der sich die Tabelle befindet eine Hintergrundfarbe und lässt dann zwischen den einzelnen Zellen Abstände, sodass der Hintergrund durchscheint.

2. Du definierst dir einen Hintergrund, der einen Rahmen hat und weist den jeder Zelle einzeln zu.

Antworten
Philip M.
  • Forum-Beiträge: 90

13.01.2012, 14:26:07 via Website

An sich gute Ideen... hab auch schon ein bisschen rumprobiert allerdings gibt hier folgende Probleme...

Zu Nummer 1:
Der Rahmen soll leider 2-Farbig sein, weswegen diese Methode weg fällt =/ Er soll 2 Pixel breit sein wobei beide verschieden helle grau Töne haben sollen.

Zu Nummer 2:
Hier ist das Problem das wenn zwei Zellen aneinander grenzen, von beiden Seiten ein Rahmen kommt und man bei einen Rahmen von 2 Pixeln aufmal einen Rahmen von 4 Pixeln erhält.

Ich hab grade noch eine dritte Idee... Ich werde einfach mal schauen ob ich vielleicht die Elemente überschreibe und je nach übergebenen Parametern einen Rahmen drum rum zeichne (border_left, border_right, border_top, border_bottom). Hoffe das funktioniert so wie ich mir das vorstelle... eventuell auch so das ich einfach eine Grafik übergeben kann welche er dann als Rahmen zeichnen soll... ich melde mich dann hier nochmal und poste eventuell meine Lösung dafür. Falls noch wer anders bessere Vorschläge hat immer nur her damit :-)

Antworten
Philip M.
  • Forum-Beiträge: 90

13.01.2012, 16:53:56 via Website

Habs geschafft :)))

Hier der Quellcode.. für mehr Flexibilität sollte man es evtl noch mal bearbeiten, aber für den Rahmen den ich erstmal brauche passt das wunderbar.

Somit kann ich nun jeder Seite sagen ob sie einen Rand haben soll.. egal ob links, rechts, oben, unten, oben und unten, recht und oben usw.
Habe anderen Elementen auch diese Möglichkeit gegeben so das ich nun auch die Elemente mit Rahmen voneinander trennen kann.

Trotzdem vielen Dank das Ihr eucht bemüht habt :-)

1public class LinearLayoutBordered extends LinearLayout {
2
3 private boolean borderLeft = true;
4 private boolean borderRight = true;
5 private boolean borderTop = true;
6 private boolean borderBottom = true;
7
8 private int borderSize = 2;
9
10 private Paint p = null;
11
12 public LinearLayoutBordered(Context context, AttributeSet attrs) {
13 super(context, attrs);
14 setWillNotDraw(false);
15
16 }
17
18 public boolean isBorderLeft() {
19 return borderLeft;
20 }
21
22 public void setBorderLeft(boolean borderLeft) {
23 this.borderLeft = borderLeft;
24 }
25
26 public boolean isBorderRight() {
27 return borderRight;
28 }
29
30 public void setBorderRight(boolean borderRight) {
31 this.borderRight = borderRight;
32 }
33
34 public boolean isBorderTop() {
35 return borderTop;
36 }
37
38 public void setBorderTop(boolean borderTop) {
39 this.borderTop = borderTop;
40 }
41
42 public boolean isBorderBottom() {
43 return borderBottom;
44 }
45
46 public void setBorderBottom(boolean borderBottom) {
47 this.borderBottom = borderBottom;
48 }
49
50 public Paint getPaint() {
51 if(p == null) {
52 p = new Paint();
53 p.setStyle(Paint.Style.FILL_AND_STROKE);
54 p.setColor(Color.BLACK);
55 p.setStrokeWidth(borderSize);
56
57 }
58
59 return p;
60 }
61
62 @Override
63 protected void onDraw(Canvas canvas) {
64 super.onDraw(canvas);
65
66 if(borderLeft) {
67 getPaint().setColor(0xFFc7ced1);
68 canvas.drawLine(0, 0, 0, getMeasuredHeight(), getPaint());
69 }
70 if(borderRight) {
71 getPaint().setColor(0xFFc7ced1);
72 canvas.drawLine(getMeasuredWidth(), 0, getMeasuredWidth(), getMeasuredHeight(), getPaint());
73 getPaint().setColor(0xFFe8eced);
74 canvas.drawLine(getMeasuredWidth()-2, 0, getMeasuredWidth()-2, getMeasuredHeight(), getPaint());
75 }
76 if(borderTop) {
77 getPaint().setColor(0xFFc7ced1);
78 canvas.drawLine(0, 0, getMeasuredWidth(), 0, getPaint());
79
80 }
81 if(borderBottom) {
82 getPaint().setColor(0xFFc7ced1);
83 canvas.drawLine(0, getMeasuredHeight(), getMeasuredWidth(), getMeasuredHeight(), getPaint());
84 getPaint().setColor(0xFFe8eced);
85 canvas.drawLine(0, getMeasuredHeight()-2, getMeasuredWidth(), getMeasuredHeight()-2, getPaint());
86 }
87
88 }
89
90 public int getBorderSize() {
91 return borderSize;
92 }
93
94 public void setBorderSize(int borderSize) {
95 this.borderSize = borderSize;
96 }
97
98}

Antworten